From c748e471dc2a1c77654c2e22a8449c974363d3d7 Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Mon, 27 Feb 2023 18:30:29 -0500
Subject: [PATCH] [WIP]: Handle correctly abort event is not currently working.
Neither the cancel event. Imprived the replace preparing but still missing to
take into account that next phase must be uploading, not other+}
---
.../dropzone/components/dropzone/Dropzone.tsx | 156 ++++--------------
.../FileMosaicUploadLayer.scss | 2 +-
.../FileMosaicUploadLayer.tsx | 37 +++--
.../components/file-mosaic/FileMosaic.tsx | 11 +-
src/files-ui/core/index.ts | 2 +-
src/files-ui/core/types/ExtFileManager.ts | 39 ++---
src/files-ui/core/upload/utils.upload.ts | 2 +-
src/files-ui/core/utils/index.ts | 4 +-
.../core/utils/isUploadAbleExtFile.ts | 5 +
9 files changed, 88 insertions(+), 170 deletions(-)
create mode 100644 src/files-ui/core/utils/isUploadAbleExtFile.ts
diff --git a/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx b/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
index 3282af7..3edcb0a 100644
--- a/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
+++ b/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
@@ -23,6 +23,7 @@ import {
sleepTransition,
toUploadableExtFileList,
cleanInput,
+ isUploadAbleExtFile,
} from "../../../../core";
import { mergeProps } from "../../../overridable";
import InputHidden from "../../../input-hidden/InputHidden";
@@ -155,7 +156,10 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
* Uploads each file in the array of ExtFiles
* First, sets all the files in preparing status and awaits `preparingTime` miliseconds.
* If `preparingTime` is not given or its value is false or 0, there won´t be a preparing phase.
+ * This is only for the first file, the rest of files will have preparing time until the file before was uploaded
+ * The first file will jump from undef to "uploading"
* Then onChange event will be called to update the files outside.
+ *
* If `onCancel` event ocurrs outside on any on the
* FileItems(e.g. by clicking the cancel button on `FileItem`),
* the extFileInstance will change its status from 'preparing' to undefined. If so,
@@ -171,27 +175,27 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
* @returns nothing
*/
const uploadfiles = async (localFiles: ExtFile[]): Promise<void> => {
+ //set uploading flag to true
setIsUploading(true);
- console.log("upload start:", localFiles, url);
- // set flag to true
- // recieve on the new list
- // initialize new list of ExtFileInstances
- let arrOfExtFilesInstances: ExtFileInstance[] = [];
+
//avoid to call upload if not allowed
- if (isUploading || localFiles.length === 0 || !arrOfExtFilesInstances) {
+ // flag is already true or there isnt files
+ //url was not provided
+ if (isUploading || localFiles.length === 0 || !url) {
setIsUploading(false);
return;
}
+ // initialize new list of ExtFileInstances
+ let arrOfExtFilesInstances: ExtFileInstance[] = [];
+
const totalNumber: number = localFiles.length;
console.log("upload start: totalNumber", totalNumber);
- const missingUpload: number = localFiles.filter((x: ExtFile) => {
- return (
- (!validateFilesFlag || (validateFilesFlag && x.valid)) &&
- x.uploadStatus !== "success"
- );
- }).length;
+ const missingUpload: number = localFiles.filter((extFile: ExtFile) =>
+ isUploadAbleExtFile(extFile, validateFilesFlag)
+ ).length;
+
console.log("upload start: missingUpload", missingUpload);
let totalRejected: number = 0;
@@ -200,7 +204,8 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
const uploadingMessenger: FunctionLabel =
DropzoneLocalizer.uploadingMessage as FunctionLabel;
- if (!(missingUpload > 0 && url)) {
+ //no missing to upload
+ if (!(missingUpload > 0)) {
console.log("upload start: noFilesMessage", missingUpload);
setLocalMessage(DropzoneLocalizer.noFilesMessage as string);
@@ -211,20 +216,16 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
setLocalMessage(uploadingMessenger(`${missingUpload}/${totalNumber}`));
// setIsUploading(true);
//PREPARING stage
- //use methods to update on static class
- //obtain a fresher dui file list
- console.log("***** before setFileListMapPreparing");
- console.table(localFiles);
+ console.log("validateFilesFlag", validateFilesFlag);
+
arrOfExtFilesInstances =
ExtFileManager.setFileListMapPreparing(
dropzoneId,
localFiles,
validateFilesFlag as boolean,
- cleanOnUpload as boolean
+ cleanOnUpload as boolean,
) || [];
- console.log("***** FileManagerLog setFileListMapPreparing");
- console.table(arrOfExtFilesInstances);
const newExtFileLocal: ExtFile[] = [...arrOfExtFilesInstances].map((x) =>
x.toExtFile()
);
@@ -242,17 +243,13 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
//AWAIT when preparing time is given
//general sleep for all files
await sleepPreparing(preparingTime);
- // workaround for preventing getting the uploadStatus as undefined
- /* arrOfExtFilesInstances.forEach((F) => {
- F.uploadStatus = "preparing";
- }); */
- //variable for storing responses
- //console.log("uploadfiles after sleep response",response);
+
console.log("FileManagerLog after sleep", arrOfExtFilesInstances);
//return;
let serverResponses: Array<UploadResponse> = [];
+ //Uplad files one by one
for (let i = 0; i < arrOfExtFilesInstances.length; i++) {
const currentExtFileInstance: ExtFileInstance = arrOfExtFilesInstances[i];
console.log(
@@ -313,10 +310,10 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
if (!(currentExtFileInstance.uploadStatus === "aborted"))
await sleepTransition();
- handleFilesChange(
- arrOfExtFilesInstances.map((x: ExtFileInstance) => x.toExtFile()),
- true
+ const newExtFileList: ExtFile[] = arrOfExtFilesInstances.map(
+ (x: ExtFileInstance) => x.toExtFile()
);
+ handleFilesChange(newExtFileList, true);
if (uploadedFile.uploadStatus === "error") {
totalRejected++;
@@ -326,94 +323,9 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
}
}
- /* arrOfExtFilesInstances.forEach(async (currentExtFileInstance) => {
- console.log("FileManagerLog current", currentExtFileInstance);
- if (currentExtFileInstance.uploadStatus === "preparing") {
- //set stage to "uploading" in one file and notify change
- // PREPARING => UPLOADING
- await instantPreparingToUploadOne(currentExtFileInstance);
- setLocalMessage(
- uploadingMessenger(`${++currentCountUpload}/${missingUpload}`)
- );
- //CHANGE
- handleFilesChange([...arrOfExtFilesInstances], true);
-
- //UPLOADING => UPLOAD()
- //upload one file and notify about change
- const uploadResponse: UploadResponse = fakeUpload
- ? await fakeFuiUpload(currentExtFileInstance, DropzoneLocalizer)
- : await uploadOnePromiseXHR(
- currentExtFileInstance,
- url,
- method,
- headers,
- uploadLabel
- );
-
- const { uploadedFile } = uploadResponse;
- //update instances
- currentExtFileInstance.uploadStatus = uploadedFile.uploadStatus;
- currentExtFileInstance.uploadMessage = uploadedFile.uploadMessage;
- //CHNAGE
- if (!(currentExtFileInstance.uploadStatus === "aborted"))
- await sleepTransition();
- handleFilesChange(
- arrOfExtFilesInstances.map((x: ExtFileInstance) => x.toExtFile()),
- true
- );
- if (uploadedFile.uploadStatus === "error") {
- totalRejected++;
- }
-
- serverResponses.push(uploadResponse);
- }
- }); */
-
- /* for (let i = 0; i < arrOfExtFilesInstances.length; i++) {
- console.log("FileManagerLog current", arrOfExtFilesInstances[i]);
- //all missing filesalways have "preparing" as uploadStatus prop
- if (arrOfExtFilesInstances[i].uploadStatus === "preparing") {
- //set stage to "uploading" in one file and notify change
- // PREPARING => UPLOADING
- await instantPreparingToUploadOne(arrOfExtFilesInstances[i]);
- setLocalMessage(
- uploadingMessenger(`${++currentCountUpload}/${missingUpload}`)
- );
- //CHANGE
- handleFilesChange([...arrOfExtFilesInstances], true);
-
- //UPLOADING => UPLOAD()
- //upload one file and notify about change
- const uploadResponse: UploadResponse = fakeUpload
- ? await fakeFuiUpload(arrOfExtFilesInstances[i], DropzoneLocalizer)
- : await uploadOnePromiseXHR(
- arrOfExtFilesInstances[i],
- url,
- method,
- headers,
- uploadLabel
- );
-
- const { uploadedFile } = uploadResponse;
- //update instances
- arrOfExtFilesInstances[i].uploadStatus = uploadedFile.uploadStatus;
- arrOfExtFilesInstances[i].uploadMessage = uploadedFile.uploadMessage;
- //CHNAGE
- if (!(arrOfExtFilesInstances[i].uploadStatus === "aborted"))
- await sleepTransition();
- handleFilesChange(
- arrOfExtFilesInstances.map((x: ExtFileInstance) => x.toExtFile()),
- true
- );
- if (uploadedFile.uploadStatus === "error") {
- totalRejected++;
- }
-
- serverResponses.push(uploadResponse);
- }
- } */
// upload group finished :D
onUploadFinish?.(serverResponses);
+
const finishUploadMessenger: FunctionLabel =
DropzoneLocalizer.uploadFinished as FunctionLabel;
setLocalMessage(
@@ -423,19 +335,17 @@ 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((extFile) => {
- extFile.xhr?.abort();
+ listExtFileLocal.forEach((extFileInstance) => {
+ console.log("Aborting extFileInstance",extFileInstance.xhr);
+ extFileInstance.xhr?.abort();
});
};
- // the current number of valid files
- // update number of valid files
- /* const numberOfValidFiles: number = useNumberOfValidFiles(
- localFiles,
- validateFilesFlag
- ); */
//the final className
const dropzoneClassName: string | undefined = useDropzoneClassName(
diff --git a/src/files-ui/components/file-mosaic/components/FileMosaicUploadLayer/FileMosaicUploadLayer.scss b/src/files-ui/components/file-mosaic/components/FileMosaicUploadLayer/FileMosaicUploadLayer.scss
index 7c8ad35..4ef8d67 100644
--- a/src/files-ui/components/file-mosaic/components/FileMosaicUploadLayer/FileMosaicUploadLayer.scss
+++ b/src/files-ui/components/file-mosaic/components/FileMosaicUploadLayer/FileMosaicUploadLayer.scss
@@ -9,7 +9,7 @@
overflow: hidden;
.elevation-list {
- transition: all 2s ease-in-out;
+ transition: all 1.5s ease;
position: absolute;
top: 0;
left: 0;
diff --git a/src/files-ui/components/file-mosaic/components/FileMosaicUploadLayer/FileMosaicUploadLayer.tsx b/src/files-ui/components/file-mosaic/components/FileMosaicUploadLayer/FileMosaicUploadLayer.tsx
index 5359ad3..ce8f0ad 100644
--- a/src/files-ui/components/file-mosaic/components/FileMosaicUploadLayer/FileMosaicUploadLayer.tsx
+++ b/src/files-ui/components/file-mosaic/components/FileMosaicUploadLayer/FileMosaicUploadLayer.tsx
@@ -1,14 +1,8 @@
import * as React from "react";
import { FileMosaicUploadLayerProps } from "./FileMosaicUploadLayerProps";
import "./FileMosaicUploadLayer.scss";
-import InfiniteLoader from "../../../loader/InfiniteLoader/InfiniteLoader";
-import {
- FileItemLocalizerSelector,
- LocalLabels,
- UPLOADSTATUS,
-} from "../../../../core";
-import { CheckCircle, Clear, DoDisturb } from "../../../icons";
-import { DynamicLoader } from "../../../loader";
+import { UPLOADSTATUS } from "../../../../core";
+
import {
AbortedStatus,
EmptyStatus,
@@ -26,16 +20,18 @@ const FileMosaicUploadLayer: React.FC<FileMosaicUploadLayerProps> = (
const elevationContainerRef = React.useRef<HTMLDivElement | null>(null);
const listContainerStoryRef = React.useRef<HTMLDivElement | null>(null);
- const FileItemStatusLocalizer: LocalLabels = FileItemLocalizerSelector(
- localization
- ).status as LocalLabels;
-
const [statusHistory, setStatusHistory] = React.useState<
Array<UPLOADSTATUS | undefined>
>([undefined]);
React.useEffect(() => {
setStatusHistory((statusHistory: Array<UPLOADSTATUS | undefined>) => {
+ if (statusHistory[statusHistory.length - 1] === "preparing") {
+ const tempStatusHistory = [...statusHistory];
+ tempStatusHistory[statusHistory.length - 1] = uploadStatus;
+ //replace
+ return [...tempStatusHistory];
+ }
return [...statusHistory, uploadStatus];
});
}, [uploadStatus]);
@@ -64,31 +60,38 @@ const FileMosaicUploadLayer: React.FC<FileMosaicUploadLayerProps> = (
case "preparing":
return (
<div className="elevation-item" key={index + 1}>
- <PreparingStatus onCancel={onCancel}/>
+ <PreparingStatus
+ onCancel={onCancel}
+ localization={localization}
+ />
</div>
);
case "uploading":
return (
<div className="elevation-item" key={index + 1}>
- <UploadingStatus onAbort={onAbort} progress={progress}/>
+ <UploadingStatus
+ onAbort={onAbort}
+ progress={progress}
+ localization={localization}
+ />
</div>
);
case "error":
return (
<div className="elevation-item" key={index + 1}>
- <ErrorStatus />
+ <ErrorStatus localization={localization} />
</div>
);
case "success":
return (
<div className="elevation-item" key={index + 1}>
- <SuccessStatus />
+ <SuccessStatus localization={localization} />
</div>
);
case "aborted":
return (
<div className="elevation-item" key={index + 1}>
- <AbortedStatus />
+ <AbortedStatus localization={localization} />
</div>
);
default:
diff --git a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx
index 8636799..e971492 100644
--- a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx
+++ b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx
@@ -60,7 +60,7 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
onRightClick,
} = props;
- console.log("FileMosaic progress "+ id, progress);
+ console.log("FileMosaic progress " + id, progress);
//ref for anchor download element
const downloadRef = React.useRef<HTMLAnchorElement>(null);
@@ -87,7 +87,7 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
); */
const localProgress: number | undefined = useProgress(progress, xhr);
- console.log("FileMosaic progress localProgress "+ localProgress);
+ console.log("FileMosaic progress localProgress " + localProgress);
//Initialize File Item
const [isReady, isImage, isVideo, url, imageSource]: [
@@ -281,8 +281,11 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
<FileMosaicUploadLayer
uploadStatus={uploadStatus}
progress={localProgress}
- onCancel={onCancel}
- onAbort={onAbort}
+ onCancel={() => onCancel?.(id)}
+ onAbort={() => {
+ xhr?.abort();
+ onAbort?.(id);
+ }}
localization={localization}
/>
</Layer>
diff --git a/src/files-ui/core/index.ts b/src/files-ui/core/index.ts
index aea53dc..e76085c 100644
--- a/src/files-ui/core/index.ts
+++ b/src/files-ui/core/index.ts
@@ -138,7 +138,7 @@ export {
sleepPreparing,
uploadOne,
uploadOneExtFile,
- cleanInput, addClassName, getRandomInt
+ cleanInput, addClassName, getRandomInt, isUploadAbleExtFile
} from "./utils";
export {
diff --git a/src/files-ui/core/types/ExtFileManager.ts b/src/files-ui/core/types/ExtFileManager.ts
index ca93798..7eaa531 100644
--- a/src/files-ui/core/types/ExtFileManager.ts
+++ b/src/files-ui/core/types/ExtFileManager.ts
@@ -96,20 +96,27 @@ export class ExtFileManager {
validateFiles: boolean,
cleanOnUpload: boolean
): ExtFileInstance[] | undefined {
+ console.log("setFileListMapPreparing before if", dropzoneId, localFiles, cleanOnUpload);
if (!(typeof dropzoneId === "number" || typeof dropzoneId === "string")) return undefined;
+ console.log("setFileListMapPreparing before try", localFiles, cleanOnUpload);
try {
+
let resultExtList: ExtFileInstance[] = [];
- //remove non valids if cleanOnUpload is true and validateFiles is also true
- let temLocalFiles: ExtFile[] = [];
- if (cleanOnUpload) {
+ //initializes the extFileLInstance list
+ let temLocalFiles: ExtFile[] = [...localFiles];
+
+ //remove non valids if cleanOnUpload is true and validateFiles is also true
+ if (cleanOnUpload && validateFiles) {
// clean on Upload is true, so non valid files must be removed
- temLocalFiles = localFiles.filter(extFile => extFile.valid)
+ temLocalFiles = temLocalFiles.filter(extFile => extFile.valid)
console.log("temLocalFiles filter", temLocalFiles);
}
+ console.log("setFileListMapPreparing after remove non valids", temLocalFiles);
+
if (validateFiles) {
// validation flag was set to true, so only valid=true files will be set to "preparing"
@@ -126,7 +133,7 @@ export class ExtFileManager {
});
} else {
// all files will be set to "preparing" whether the valid value
- // except those diles with uploadStatus ==="success"
+ // except those files with uploadStatus ==="success"
temLocalFiles =
temLocalFiles
.map(extFile => {
@@ -138,31 +145,19 @@ export class ExtFileManager {
});
}
- console.log("FileManagerLog RESULT temLocalFiles", temLocalFiles);
-
- //sets on preparing stage all files according to the following criteria:
- // If the uploadStatus is diferent than "sucess" AND
- // If validateFiles is true and the file is true OR validateFiles is false
- // then update the files on preparing stage. Otherwise keep the extFile props.
- /* for (let i = 0; i < resultExtList.length; i++) {
- const extFileInstance: ExtFileInstance = resultExtList[i];
- const { valid, uploadStatus } = extFileInstance;
- console.log("upload setFileListMapPreparing resultExtList[i]", (uploadStatus !== "success") && ((validateFiles && valid) || !validateFiles));
-
- if ((uploadStatus !== "success") && ((validateFiles && valid) || !validateFiles))
- resultExtList[i].uploadStatus = "preparing";
- } */
+ console.log("setFileListMapPreparing result", temLocalFiles);
+ //converto to Object instances
resultExtList = temLocalFiles.map(F => new ExtFileInstance(F));
- console.log("FileManagerLog RESULT resultExtList", resultExtList);
+ console.log("setFileListMapPreparing RESULT resultExtList", resultExtList);
const resultSet = ExtFileManager.setFileList(dropzoneId, resultExtList);
- console.log("FileManagerLog RESULT resultSet", resultSet);
+ console.log("setFileListMapPreparing RESULT resultSet", resultSet);
return resultExtList;
// return ExtFileManager.fileLists[dropzoneId];
} catch (error) {
- console.error("upload setFileListMapPreparing Error on get List", error);
+ console.error("setFileListMapPreparing Error on get List", error);
return undefined;
}
diff --git a/src/files-ui/core/upload/utils.upload.ts b/src/files-ui/core/upload/utils.upload.ts
index 00f45cd..1d58d63 100644
--- a/src/files-ui/core/upload/utils.upload.ts
+++ b/src/files-ui/core/upload/utils.upload.ts
@@ -111,7 +111,7 @@ export const sleepTransition = (
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(true);
- }, 1200);
+ }, 1500);
});
}
diff --git a/src/files-ui/core/utils/index.ts b/src/files-ui/core/utils/index.ts
index 0147803..678c280 100644
--- a/src/files-ui/core/utils/index.ts
+++ b/src/files-ui/core/utils/index.ts
@@ -36,4 +36,6 @@ export { getRandomInt } from "./randomInt";
export { cleanInput } from "./input.utils";
-export { addClassName } from "./addClassName";
\ No newline at end of file
+export { addClassName } from "./addClassName";
+
+export {isUploadAbleExtFile} from "./isUploadAbleExtFile";
\ No newline at end of file
diff --git a/src/files-ui/core/utils/isUploadAbleExtFile.ts b/src/files-ui/core/utils/isUploadAbleExtFile.ts
new file mode 100644
index 0000000..112a345
--- /dev/null
+++ b/src/files-ui/core/utils/isUploadAbleExtFile.ts
@@ -0,0 +1,5 @@
+import { ExtFile } from "../types";
+
+export const isUploadAbleExtFile = (extFile: ExtFile, validateFilesFlag: boolean) => {
+ return (!validateFilesFlag || (validateFilesFlag && extFile.valid)) && extFile.uploadStatus !== "success";
+}
\ No newline at end of file
--
GitLab