loader on first drag and background image

This commit is contained in:
Hugo Lextrait 2023-05-12 10:57:24 +02:00
parent ea40b10af9
commit f7406746ee
3 changed files with 14 additions and 9 deletions

View File

@ -69,7 +69,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
} }
public override render(): JSX.Element { public override render(): JSX.Element {
console.log("Loading :" , this.state.loading); console.log("Loading :", this.state.loading);
return ( return (
<div className={classes["container"]}> <div className={classes["container"]}>
<div <div
@ -282,23 +282,24 @@ export default class DepositDocument extends React.Component<IProps, IState> {
} }
private async onDragDrop(event: React.DragEvent<HTMLDivElement>) { private async onDragDrop(event: React.DragEvent<HTMLDivElement>) {
this.setState({
loading: true,
});
event.preventDefault(); event.preventDefault();
this.setState({ this.setState({
isDragOver: false, isDragOver: false,
}); });
const file = event.dataTransfer.files[0]; const file = event.dataTransfer.files[0];
if (file) this.addFile(file); if (file) this.addFile(file);
else this.setState({ loading: false });
} }
private async addFile(file: File) { private async addFile(file: File) {
this.setState({
loading: true,
});
const formData = new FormData(); const formData = new FormData();
formData.append("file", file, file.name); formData.append("file", file, file.name);
const query = JSON.stringify({ document: { uid: this.props.document.uid } }); const query = JSON.stringify({ document: { uid: this.props.document.uid } });
formData.append("q", query); formData.append("q", query);
const newFile = await Files.getInstance().post(formData); const newFile = await Files.getInstance().post(formData);
const files = this.state.currentFiles ? [...this.state.currentFiles, newFile] : [newFile]; const files = this.state.currentFiles ? [...this.state.currentFiles, newFile] : [newFile];
@ -335,15 +336,19 @@ export default class DepositDocument extends React.Component<IProps, IState> {
} }
private async onFileChange() { private async onFileChange() {
if (!this.inputRef.current) return;
this.setState({ this.setState({
loading: true, loading: true,
}); });
if (!this.inputRef.current) return;
const files = this.inputRef.current.files; const files = this.inputRef.current.files;
if (!files) return; if (!files) {
this.setState({ loading: false });
return;
}
const file = files[0]; const file = files[0];
if (file) this.addFile(file); if (file) this.addFile(file);
else this.setState({ loading: false });
} }
private addDocument() { private addDocument() {

View File

@ -18,7 +18,7 @@ import Users from "@Front/Api/LeCoffreApi/SuperAdmin/Users/Users";
import User from "le-coffre-resources/dist/Notary"; import User from "le-coffre-resources/dist/Notary";
import Folders, { IPostFoldersParams } from "@Front/Api/LeCoffreApi/SuperAdmin/Folders/Folders"; import Folders, { IPostFoldersParams } from "@Front/Api/LeCoffreApi/SuperAdmin/Folders/Folders";
import { NextRouter, useRouter } from "next/router"; import { NextRouter, useRouter } from "next/router";
import backgroundImage from "@Front/assets/images/404-background-image.jpeg"; import backgroundImage from "@Assets/images/404-background-image.jpeg";
type IFormValues = { type IFormValues = {
folder_number: string; folder_number: string;

View File

@ -6,7 +6,7 @@ import BasePage from "../Base";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage"; import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
import backgroundImage from "@Front/assets/images/404-background-image.jpeg"; import backgroundImage from "@Assets/images/404-background-image.jpeg";
export default class PageNotFound extends BasePage { export default class PageNotFound extends BasePage {
public override render(): JSX.Element { public override render(): JSX.Element {