From 5797c2d00b0d55cfea2eb2b4db1fe29e6da55a7b Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Thu, 2 Mar 2023 19:17:46 -0500
Subject: [PATCH] [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%.
---
.../dropzone/components/dropzone/Dropzone.tsx | 36 ++++++++-----
.../file-input-button/FileInputButton.tsx | 1 -
src/files-ui/hooks/useDropzoneFileUpdater.ts | 51 ++++++++++++++-----
3 files changed, 62 insertions(+), 26 deletions(-)
diff --git a/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx b/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
index 3edcb0a..bf3d543 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 df33ce3..85513f5 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 0456e50..1b5b133 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
--
GitLab