4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

✨ Downloading files working

Browse Source
This commit is contained in:
Maxime Lalo 2023-09-26 15:48:14 +02:00
parent f45ce48ce3
commit c55a4ce014
2 changed files with 17 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/front/Components/DesignSystem/FilePreview/index.tsx
View File

@ -1,3 +1,4 @@
/* eslint-disable @next/next/no-img-element */
import React from "react"; import React from "react";
import Typography, { ITypo, ITypoColor } from "../Typography"; import Typography, { ITypo, ITypoColor } from "../Typography";

30
src/front/Components/Layouts/Folder/ViewDocuments/index.tsx
View File

@ -34,7 +34,7 @@ type IState = {
selectedFile: File | null; selectedFile: File | null;
validatedPercentage: number; validatedPercentage: number;
document: Document | null; document: Document | null;
fileData: string; fileBlob: Blob | null;
}; };
class ViewDocumentsClass extends BasePage<IPropsClass, IState> { class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
@ -49,7 +49,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
selectedFile: null, selectedFile: null,
validatedPercentage: this.getRandomPercentageForOcr(), validatedPercentage: this.getRandomPercentageForOcr(),
document: null, document: null,
fileData: "", fileBlob: null,
}; };
this.closeModals = this.closeModals.bind(this); this.closeModals = this.closeModals.bind(this);
@ -88,7 +88,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
)} )}
<div className={classes["file-container"]}> <div className={classes["file-container"]}>
<FilePreview <FilePreview
href={this.state.fileData} href={this.state.fileBlob ? URL.createObjectURL(this.state.fileBlob) : ""}
fileName={this.state.selectedFile.file_name} fileName={this.state.selectedFile.file_name}
key={this.state.selectedFile.uid} key={this.state.selectedFile.uid}
/> />
@ -119,7 +119,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
<Button disabled>Télécharger</Button> <Button disabled>Télécharger</Button>
</> </>
)} )}
{this.state.document?.document_status === "VALIDATED" && ( {this.state.document?.document_status === "VALIDATED" && this.state.fileBlob && (
<Button onClick={this.downloadFile}>Télécharger</Button> <Button onClick={this.downloadFile}>Télécharger</Button>
)} )}
</div> </div>
@ -193,11 +193,10 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
} }
private async getFilePreview(): Promise<void> { private async getFilePreview(): Promise<void> {
const setState = this.setState;
try { try {
const file: Blob = await Files.getInstance().download(this.state.selectedFile?.uid as string); const fileBlob: Blob = await Files.getInstance().download(this.state.selectedFile?.uid as string);
this.setState({ this.setState({
fileData: URL.createObjectURL(file), fileBlob,
}); });
} catch (e) { } catch (e) {
console.log(e); console.log(e);
@ -205,27 +204,16 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
} }
private downloadFile() { private downloadFile() {
const fileName = this.state.selectedFile?.file_path?.split("/").pop(); if (!this.state.fileBlob) return;
fetch(Files.getInstance().getUploadLink(this.state.selectedFile?.uid as string)) const url = window.URL.createObjectURL(this.state.fileBlob);
.then((resp) => resp.blob())
.then((blob) => {
const url = window.URL.createObjectURL(blob);
const a = document.createElement("a"); const a = document.createElement("a");
a.style.display = "none"; a.style.display = "none";
a.href = url; a.href = url;
// the filename you want // the filename you want
a.download = fileName as string; a.download = this.state.selectedFile?.file_name as string;
document.body.appendChild(a); document.body.appendChild(a);
a.click(); a.click();
window.URL.revokeObjectURL(url); window.URL.revokeObjectURL(url);
})
.catch((e) => {
const a = document.createElement("a");
a.href = this.state.selectedFile?.file_path as string;
a.target = "_blank";
a.click();
console.error(e);
});
} }
private getRandomPercentageForOcr() { private getRandomPercentageForOcr() {