✨ Fix document input and added a size limit

src/front/Components/DesignSystem/DepositDocument/index.tsx

@@ -41,6 +41,30 @@ type IState = {
 	loading: boolean;
 };
 
+type fileAccepted = {
+	extension: string;
+	size: number;
+};
+
+const filesAccepted: { [key: string]: fileAccepted } = {
+	"application/pdf": {
+		extension: "pdf",
+		size: 41943040,
+	},
+	"image/jpeg": {
+		extension: "jpeg",
+		size: 41943040,
+	},
+	"image/png": {
+		extension: "png",
+		size: 41943040,
+	},
+	"image/jpg": {
+		extension: "jpg",
+		size: 41943040,
+	},
+};
+
 export default class DepositDocument extends React.Component<IProps, IState> {
 	private inputRef = React.createRef<HTMLInputElement>();
 	private index = 0;
@@ -80,7 +104,13 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 					onDrop={this.onDragDrop}
 					onDragLeave={this.onDragLeave}
 					data-drag-over={this.state.isDragOver.toString()}>
-					<input type="file" ref={this.inputRef} hidden onChange={this.onFileChange} />
+					<input
+						type="file"
+						ref={this.inputRef}
+						hidden
+						onChange={this.onFileChange}
+						accept={Object.keys(filesAccepted).join(",")}
+					/>
 					<div className={classes["top-container"]}>
 						<div className={classes["left"]}>
 							<Image src={DepositDocumentIcon} alt="Deposit document" />
@@ -121,7 +151,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 									<div className={classes["file-container"]} key={fileObj.name + file.index}>
 										<div className={classes["left-part"]}>
 											<Image src={DocumentCheckIcon} alt="Document check" />
-											<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
+											<Typography typo={ITypo.P_16} color={ITypoColor.GREY} title={file.fileName ?? fileObj.name}>
 												{this.shortName(file.fileName || fileObj.name)}
 											</Typography>
 										</div>
@@ -281,19 +311,29 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 	}
 
 	private async onDragDrop(event: React.DragEvent<HTMLDivElement>) {
-		this.setState({
-			loading: true,
-		});
 		event.preventDefault();
 		this.setState({
 			isDragOver: false,
 		});
 		const file = event.dataTransfer.files[0];
 		if (file) this.addFile(file);
-		else this.setState({ loading: false });
 	}
 
 	private async addFile(file: File) {
+		const fileAccepted = filesAccepted[file.type];
+		if (!fileAccepted) {
+			alert("Ce type de fichier n'est pas accepté");
+			return false;
+		}
+		if (file.size > fileAccepted.size) {
+			alert("Ce fichier est trop volumineux");
+			return false;
+		}
+
+		this.setState({
+			loading: true,
+		});
+
 		const formData = new FormData();
 		formData.append("file", file, file.name);
 		const query = JSON.stringify({ document: { uid: this.props.document.uid } });
@@ -302,10 +342,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 		const newFile = await Files.getInstance().post(formData);
 		const files = this.state.currentFiles ? [...this.state.currentFiles, newFile] : [newFile];
 
-		this.setState({
+		const newFileList = [
-			currentFiles: files,
-			loading: false,
-			files: [
 			...this.state.files,
 			{
 				index: this.index++,
@@ -314,10 +351,19 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 				archived: null,
 				fileName: newFile?.file_name ?? "",
 			},
-			],
+		];
-		});
+		this.setState(
+			{
+				currentFiles: files,
+				loading: false,
+				files: newFileList,
+			},
+			() => {
+				if (this.props.onChange) this.props.onChange(newFileList.map((file) => file.file));
+			},
+		);
 
-		if (this.props.onChange) this.props.onChange(this.state.files.map((file) => file.file));
+		return true;
 	}
 
 	private async removeFile(e: any) {
@@ -336,9 +382,6 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 
 	private async onFileChange() {
 		if (!this.inputRef.current) return;
-		this.setState({
-			loading: true,
-		});
 		const files = this.inputRef.current.files;
 		if (!files) {
 			this.setState({ loading: false });
@@ -346,12 +389,16 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 		}
 		const file = files[0];
 
+		try {
 			if (file) this.addFile(file);
-		else this.setState({ loading: false });
+		} catch (e) {
+			console.log(e);
+		}
 	}
 
 	private addDocument() {
 		if (!this.inputRef.current) return;
+		this.inputRef.current.value = "";
 		this.inputRef.current.click();
 	}
 

src/front/Components/DesignSystem/Typography/index.tsx

@@ -7,6 +7,7 @@ type IProps = {
 	children: React.ReactNode;
 	color?: ITypoColor;
 	className?: string;
+	title?: string;
 };
 type IState = {};
 
@@ -50,7 +51,8 @@ export default class Typography extends React.Component<IProps, IState> {
 					classes[this.props.typo],
 					classes[this.props.color ?? ""],
 					this.props.className ?? "",
-				)}>
+				)}
+				title={this.props.title}>
 				{this.props.children}
 			</div>
 		);