diff --git a/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx b/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx index 3edcb0a25af47a36384edbbe25826aa927ba437f..bf3d543f1a7f2be75077acec2cc47e6e109e6b6e 100644 --- a/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx +++ b/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx @@ -24,6 +24,7 @@ import { toUploadableExtFileList, cleanInput, isUploadAbleExtFile, + sanitizeArrExtFile, } from "../../../../core"; import { mergeProps } from "../../../overridable"; import InputHidden from "../../../input-hidden/InputHidden"; @@ -223,7 +224,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => { dropzoneId, localFiles, validateFilesFlag as boolean, - cleanOnUpload as boolean, + cleanOnUpload as boolean ) || []; const newExtFileLocal: ExtFile[] = [...arrOfExtFilesInstances].map((x) => @@ -252,20 +253,27 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => { //Uplad files one by one for (let i = 0; i < arrOfExtFilesInstances.length; i++) { const currentExtFileInstance: ExtFileInstance = arrOfExtFilesInstances[i]; + console.log( "FileManagerLog currentExtFileInstance " + i, currentExtFileInstance ); - if (currentExtFileInstance.uploadStatus === "preparing") { + if ( + currentExtFileInstance.uploadStatus === "preparing" && + !currentExtFileInstance.extraData?.deleted + ) { //set stage to "uploading" in one file and notify change // PREPARING => UPLOADING + await sleepTransition(); + instantPreparingToUploadOne(currentExtFileInstance); + setLocalMessage( uploadingMessenger(`${++currentCountUpload}/${missingUpload}`) ); //CHANGE - handleFilesChange([...arrOfExtFilesInstances], true); + handleFilesChange(sanitizeArrExtFile(arrOfExtFilesInstances), true); //UPLOADING => UPLOAD() //upload one file and notify about change @@ -310,19 +318,20 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => { if (!(currentExtFileInstance.uploadStatus === "aborted")) await sleepTransition(); - const newExtFileList: ExtFile[] = arrOfExtFilesInstances.map( - (x: ExtFileInstance) => x.toExtFile() - ); - handleFilesChange(newExtFileList, true); + handleFilesChange(sanitizeArrExtFile(arrOfExtFilesInstances), true); if (uploadedFile.uploadStatus === "error") { totalRejected++; } serverResponses.push(uploadResponse); + }else{ + handleFilesChange(sanitizeArrExtFile(arrOfExtFilesInstances), true); } } + handleFilesChange(sanitizeArrExtFile(arrOfExtFilesInstances), true); + // upload group finished :D onUploadFinish?.(serverResponses); @@ -335,15 +344,18 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => { }; const handleAbortUpload = () => { - const listExtFileLocal: ExtFileInstance[] | undefined = ExtFileManager.getExtFileInstanceList(dropzoneId); - console.log("Aborting", listExtFileLocal, dropzoneId); + console.log("Aborting", listExtFileLocal, dropzoneId); if (!listExtFileLocal) return; - listExtFileLocal.forEach((extFileInstance) => { - console.log("Aborting extFileInstance",extFileInstance.xhr); - extFileInstance.xhr?.abort(); + listExtFileLocal.forEach((extFileInstance: ExtFileInstance) => { + if (extFileInstance.uploadStatus === "uploading") { + if (extFileInstance.xhr !== null && extFileInstance.xhr !== undefined) + extFileInstance.xhr.abort(); + } + extFileInstance.uploadStatus = "aborted"; + //console.log("Aborting extFileInstance", extFileInstance.xhr); }); }; diff --git a/src/files-ui/components/file-input-button/FileInputButton.tsx b/src/files-ui/components/file-input-button/FileInputButton.tsx index df33ce333b36f1d1446a893e722daa52d99701db..85513f547bea57a1f50be667ef1d87d2c90fec4a 100644 --- a/src/files-ui/components/file-input-button/FileInputButton.tsx +++ b/src/files-ui/components/file-input-button/FileInputButton.tsx @@ -19,7 +19,6 @@ import { toUploadableExtFileList, UploadConfig, uploadExtFile, - //uploadOnePromiseXHR, UploadResponse, validateExtFileList, } from "../../core"; diff --git a/src/files-ui/hooks/useDropzoneFileUpdater.ts b/src/files-ui/hooks/useDropzoneFileUpdater.ts index 0456e5058517e0101c255a639ecc32ff8670a439..1b5b133dff20ec2e7e695b3615d528134e3e011a 100644 --- a/src/files-ui/hooks/useDropzoneFileUpdater.ts +++ b/src/files-ui/hooks/useDropzoneFileUpdater.ts @@ -35,27 +35,52 @@ const useDropzoneFileListUpdater = ( React.useEffect(() => { let arrOfExtFiles: ExtFileInstance[] | undefined = ExtFileManager.getExtFileInstanceList(dropzoneId); - console.log("value changed", isUploading, value.map(F => F.uploadStatus),dropzoneId); + console.log("value changed", isUploading, value.map(F => F.uploadStatus), dropzoneId); // console.log("value changed", value.map(F => F.uploadStatus)); if (!isUploading) { setLocalFiles(value); } else { // when is uploading if (arrOfExtFiles) { + //lenght of the new arr can be equal or lower + //when lower, it means a file was deleted, it will be removed only if was not uploaded + //when same lenght it means that a file could be - if (arrOfExtFiles.length !== value.length || value.length === 0) { - return; - } - for (let i = 0; i < arrOfExtFiles.length; i++) { - if ( - (value[i].uploadStatus === undefined) - && - (arrOfExtFiles[i].uploadStatus === "preparing") - ) { - console.log("useDropzoneFileListUpdater onCancel i", i); - arrOfExtFiles[i].uploadStatus = undefined; + //no mather the size, it will search for the missing and the status that changed + arrOfExtFiles.forEach((extFileInstance: ExtFileInstance) => { + //if the current Ext file is not present anymore + //add deleted flag + const extFileIndex: number = value.findIndex((extFile: ExtFile) => extFile.id === extFileInstance.id) + if (extFileIndex === -1) { + + extFileInstance.extraData = { deleted: true } + console.log("extFileUpdater not found", extFileInstance.id); + } else { + extFileInstance.uploadStatus = value[extFileIndex].uploadStatus; + extFileInstance.uploadMessage = value[extFileIndex].uploadMessage; + if (value[extFileIndex].uploadStatus === undefined) { + console.log("extFileUpdater canceled", extFileInstance.id); + + } else if (value[extFileIndex].uploadStatus === "aborted") { + console.log("extFileUpdater aborted", extFileInstance.id); + + } } - } + }) + + /* if (arrOfExtFiles.length !== value.length || value.length === 0) { + return; + } + for (let i = 0; i < arrOfExtFiles.length; i++) { + if ( + (value[i].uploadStatus === undefined) + && + (arrOfExtFiles[i].uploadStatus === "preparing") + ) { + console.log("useDropzoneFileListUpdater onCancel i", i); + arrOfExtFiles[i].uploadStatus = undefined; + } + } */ } } // eslint-disable-next-line