diff --git a/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx b/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
index 3282af7481da1e432f225fe7d0ed51681880d02b..3edcb0a25af47a36384edbbe25826aa927ba437f 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 7c8ad35cb606e66c81f99394a1fe93af4a5ba2e0..4ef8d675cb7da04781c8570f36b4b220ae07b15b 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 5359ad331e4e257fe9746fac3e149c30ba2cf5b1..ce8f0adf861cdfb0c6cca99768cc563601887106 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 8636799c8bacef7fb13e0bb24c879635c9e9edac..e97149286d6322fdb428c422b062a5f39b7091b6 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 aea53dc9a7e2a446ce5d09369fc5b3f0ea69aa97..e76085c5ebbd5f35e0d87965dee23db775d95d3f 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 ca93798f7ebcd5ef5c0df05f3a4fdb9d20aa9753..7eaa531e4dcc38162460250345048db4b0777a78 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 00f45cd67588c65c97a158749f5f076c4e2881b7..1d58d63a1d913949642c886f4f2fecc5d54b3f76 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 01478032d4049b5f5cbc89eb9d4a6c078d0fb95e..678c2808484b745c11264947b8acbce11c63f7b4 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 0000000000000000000000000000000000000000..112a345b28e1457e050097db68921163ddec2c4a
--- /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