[WIP]: Improving the upload feature. ALlows delete, cancel and abort. However,...

[WIP]: Improving the upload feature. ALlows delete, cancel and abort. However, there are unecxpected result like sometime the uploading file is uploaded but the status remains in 'uploading' in 100%.

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);
 
     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);
     });
   };
 

src/files-ui/components/file-input-button/FileInputButton.tsx

@@ -19,7 +19,6 @@ import {
   toUploadableExtFileList,
   UploadConfig,
   uploadExtFile,
-  //uploadOnePromiseXHR,
   UploadResponse,
   validateExtFileList,
 } from "../../core";

src/files-ui/hooks/useDropzoneFileUpdater.ts

@@ -42,8 +42,33 @@ const useDropzoneFileListUpdater = (
         } 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) {
+                //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++) {
@@ -55,7 +80,7 @@ const useDropzoneFileListUpdater = (
                           console.log("useDropzoneFileListUpdater onCancel i", i);
                           arrOfExtFiles[i].uploadStatus = undefined;
                       }
-                }
+                  } */
             }
         }
         // eslint-disable-next-line