diff --git a/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.jsx b/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.jsx
index 12665f2920855bc7dd5600f2bd9bce0f3f40f312..f71d0c7e40c501bc7897d837e39855e8fd93b098 100644
--- a/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.jsx
+++ b/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.jsx
@@ -15,9 +15,7 @@ export default function AdvancedDropzoneDemo() {
const [extFiles, setExtFiles] = useState([]);
const [imageSrc, setImageSrc] = React.useState(undefined);
- const [videoSrc, setVideoSrc] = React.useState(
- undefined
- );
+ const [videoSrc, setVideoSrc] = React.useState(undefined);
const updateFiles = (incommingFiles) => {
console.log("incomming extFiles", incommingFiles);
@@ -35,15 +33,15 @@ export default function AdvancedDropzoneDemo() {
const handleFinish = (res) => {
console.log("finish", res);
};
- const handleWatch = (videoSource) => {
+ const handleWatch = (videoSource) => {
console.log(
"handleWatch videoSource",
"https://files-ui-temp-storage.s3.amazonaws.com/2029385a4ed32ff10beeb94c0585e8ac1a8c377c68d22ef25ce5863694a5499e.mp4"
);
//setVideoSrc(videoSource);
- //
- setVideoSrc(videoSource);
- // setVideoSrc("https://www.w3schools.com/tags/movie.mp4");
+ //
+ setVideoSrc(videoSource);
+ // setVideoSrc("https://www.w3schools.com/tags/movie.mp4");
};
useEffect(() => {
@@ -57,6 +55,26 @@ export default function AdvancedDropzoneDemo() {
console.log("checkFiles error", error);
}
}
+ const handleAbort = (id) => {
+ // alert(id);
+ setExtFiles(
+ extFiles.map((ef) => {
+ if (ef.id === id) {
+ return { ...ef, uploadStatus: "aborted" };
+ } else return { ...ef };
+ })
+ );
+ };
+ const handleCancel= (id) => {
+ // alert(id);
+ setExtFiles(
+ extFiles.map((ef) => {
+ if (ef.id === id) {
+ return { ...ef, uploadStatus: undefined };
+ } else return { ...ef };
+ })
+ );
+ };
return (
<>
<Dropzone
@@ -67,7 +85,7 @@ export default function AdvancedDropzoneDemo() {
/* maxFiles={3}
maxFileSize={2998000 * 20} */
label="Drag'n drop files here or click to browse"
- // accept=".png,image/*, video/*"
+ // accept=".png,image/*, video/*"
uploadConfig={{
/* autoUpload: true */
method: "POST",
@@ -98,6 +116,8 @@ export default function AdvancedDropzoneDemo() {
onDelete={onDelete}
onSee={handleSee}
onWatch={handleWatch}
+ onAbort={handleAbort}
+ onCancel={handleCancel}
resultOnTooltip
alwaysActive
preview
diff --git a/src/components/demo-components/main-page/DropzoneMainPage.jsx b/src/components/demo-components/main-page/DropzoneMainPage.jsx
index c09a7cd0d6f4fdb591a5461487660a55a263fd85..2ded2ed94f5e4d4d51a33d6e2533c5483c5922cd 100644
--- a/src/components/demo-components/main-page/DropzoneMainPage.jsx
+++ b/src/components/demo-components/main-page/DropzoneMainPage.jsx
@@ -17,7 +17,7 @@ const DropzoneMainPage = ({ darkMode = false }) => {
const [files, setFiles] = React.useState(baseFiles);
const updateFiles = (incommingFiles) => {
//do something with the files
- console.log("MainPage incommingFiles",incommingFiles);
+ console.log("MainPage incommingFiles", incommingFiles);
setFiles(incommingFiles);
//even your own upload implementation
@@ -41,11 +41,12 @@ const DropzoneMainPage = ({ darkMode = false }) => {
// minHeight="400px"
onChange={updateFiles}
value={files}
- maxFileSize={28*1024}
+ maxFileSize={28 * 1024 * 10}
maxFiles={5}
accept=".jpg, .png, application/json, video/*"
fakeUpload
behaviour="add"
+ uploadConfig={{ autoUpload: true , url:"fdbd"}}
//uploadConfig={{ autoUpload: true, url:"fdbd" }}
>
{files.length > 0 &&
diff --git a/src/files-ui/components/dropzone/components/dropzone/Dropzone.scss b/src/files-ui/components/dropzone/components/dropzone/Dropzone.scss
index 69e014cb2aa767ea544c49a26677d1b9ab90edf7..a923cdd50f7911ca034b6313e6bb0d11d3f787b2 100644
--- a/src/files-ui/components/dropzone/components/dropzone/Dropzone.scss
+++ b/src/files-ui/components/dropzone/components/dropzone/Dropzone.scss
@@ -101,6 +101,6 @@
@media (max-width: 960px) {
width: calc(100% - 1px);
padding-left: 1px;
- font-size: 0.8rem;
+ font-size: 0.9rem;
}
}
diff --git a/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx b/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
index 5572c22a0d49054ede35c3d1353ed7962639b78c..3d2476ecb8601c0e9ed8c288745c9c9115589b7e 100644
--- a/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
+++ b/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
@@ -1,4 +1,3 @@
-
import * as React from "react";
import {
DropzoneLocalizerSelector,
@@ -179,11 +178,12 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
* @returns nothing
*/
const uploadfiles = async (localFiles: ExtFile[]): Promise<void> => {
- // set uploading flag to true
+ //set uploading flag to true
setIsUploading(true);
- // avoid calling upload if not allowed
- // flag is already true or there isnt files
- // url was not provided
+
+ //avoid to call upload if not allowed
+ // flag is already true or there isnt files
+ //url was not provided
if (isUploading || localFiles.length === 0 || !url) {
setIsUploading(false);
return;
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/components/file-mosaic/components/FileMosaicStatus/FileMosaicStatus.tsx b/src/files-ui/components/file-mosaic/components/FileMosaicStatus/FileMosaicStatus.tsx
index 4302542752cbdc8abd5b018e4628f093ff60f1d1..8501bfb4d9d11cf462076b0a79b320ae4301eb4e 100644
--- a/src/files-ui/components/file-mosaic/components/FileMosaicStatus/FileMosaicStatus.tsx
+++ b/src/files-ui/components/file-mosaic/components/FileMosaicStatus/FileMosaicStatus.tsx
@@ -22,7 +22,7 @@ const FileMosaicStatus: React.FC<FileMosaicStatusProps> = (
</div>
);
}
- if (uploadStatus === "error") {
+ if (uploadStatus === "error" || uploadStatus === "aborted") {
return (
<div className="files-ui-file-item-status-container file-status-error">
<UploadError
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..c288bad7aa4e4e643d9f209a7081df3c5188e87a 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,21 @@ 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" &&
+ uploadStatus === "uploading"
+ ) {
+ const tempStatusHistory = [...statusHistory];
+ tempStatusHistory[statusHistory.length - 1] = uploadStatus;
+ //replace
+ return [...tempStatusHistory];
+ }
return [...statusHistory, uploadStatus];
});
}, [uploadStatus]);
@@ -64,31 +63,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.scss b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.scss
index ecea57cf1ba62368133e0ad1de69d8d313004ede..78bf294dc99cda25b94a6523d27c7010dc2517ed 100644
--- a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.scss
+++ b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.scss
@@ -93,6 +93,19 @@
text-align: left;
scrollbar-width: thin;
+ &::-webkit-scrollbar {
+ width: 9px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background: transparent;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background-color: #646c7fa9;
+ border-radius: 20px;
+ border: transparent;
+ }
line-height: 1.5;
letter-spacing: 0.02857em;
font-family: "Poppins", sans-serif;
@@ -123,19 +136,7 @@
}
///
- &::-webkit-scrollbar {
- width: 9px;
- }
- &::-webkit-scrollbar-track {
- background: transparent;
- }
-
- &::-webkit-scrollbar-thumb {
- background-color: #646c7fa9;
- border-radius: 20px;
- border: transparent;
- }
}
.files-ui-file-mosaic-file-name {
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..841fa9693fd214112f5035ac427dd4ea39026b18 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,15 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
<FileMosaicUploadLayer
uploadStatus={uploadStatus}
progress={localProgress}
- onCancel={onCancel}
- onAbort={onAbort}
+ onCancel={onCancel ? () => onCancel?.(id) : undefined}
+ onAbort={
+ onAbort
+ ? () => {
+ xhr?.abort();
+ onAbort?.(id);
+ }
+ : undefined
+ }
localization={localization}
/>
</Layer>
diff --git a/src/files-ui/components/material-button/MaterialButton.scss b/src/files-ui/components/material-button/MaterialButton.scss
index 78c6c8b51d25e2903c494d0658d2ecc52a36b878..d0ef2fe468d0e95fee16737845122b72fbe1485c 100644
--- a/src/files-ui/components/material-button/MaterialButton.scss
+++ b/src/files-ui/components/material-button/MaterialButton.scss
@@ -88,7 +88,7 @@ span.ripple {
}
//mobile
-@media screen and (max-width: 600px) {
+/* @media screen and (max-width: 600px) {
.material-button {
min-width: 30px;
font-size: 0.78rem;
@@ -102,3 +102,4 @@ span.ripple {
padding: 4px 12px;
}
}
+ */
\ No newline at end of file
diff --git a/src/files-ui/core/index.ts b/src/files-ui/core/index.ts
index aea53dc9a7e2a446ce5d09369fc5b3f0ea69aa97..0c918711726ce820aca4736f3bf15383de4348f8 100644
--- a/src/files-ui/core/index.ts
+++ b/src/files-ui/core/index.ts
@@ -104,7 +104,6 @@ export {
sleepTransition,
toUploadableExtFileList,
unableToUploadResult,
- uploadOnePromiseXHR,
makeServerResponse,
uploadFile,
uploadFormData,
@@ -117,7 +116,10 @@ export {
makeErrorUploadResponse,
makeSuccessUploadResponse,
addExtraData,
- addHeaders
+ addHeaders,
+ sanitizeArrExtFile,
+ unexpectedErrorUploadResult,
+ setNextUploadStatus
} from "./upload";
export {
@@ -138,7 +140,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/index.ts b/src/files-ui/core/upload/index.ts
index 9977205eba298f77fd98096128c871052d241397..db4a27dee64f6f27f61da69ab6a2d38979525ab4 100644
--- a/src/files-ui/core/upload/index.ts
+++ b/src/files-ui/core/upload/index.ts
@@ -2,9 +2,6 @@ export {
uploadExtFile,
FuiUpload,
- completeUploadResult,
- unableToUploadResult,
- uploadOnePromiseXHR,
uploadFile,
uploadFormData,
} from "./upload";
@@ -30,15 +27,9 @@ export {
preparingToUploadOne,
sleepTransition,
toUploadableExtFileList,
-} from "./utils.upload";
-/* export {
- FuiUpload,
completeUploadResult,
- instantPreparingToUploadOne,
- preparingToUploadOne,
- sleepTransition,
- toUploadableExtFileList,
+ sanitizeArrExtFile,
unableToUploadResult,
unexpectedErrorUploadResult,
- uploadOnePromiseXHR
-} from "./upload.utils"; */
\ No newline at end of file
+ setNextUploadStatus
+} from "./utils.upload";
diff --git a/src/files-ui/core/upload/response.upload.ts b/src/files-ui/core/upload/response.upload.ts
index 047b24a211f01a0770e3d1f79d7d6f2dbf14fec6..4d7eee8eeea7422163956a3220231dad735cd3bf 100644
--- a/src/files-ui/core/upload/response.upload.ts
+++ b/src/files-ui/core/upload/response.upload.ts
@@ -47,6 +47,7 @@ export const makeErrorUploadResponse = (
extFile: ExtFile,
responseFui: ServerResponse
): UploadResponse => {
+ console.log("makeErrorUploadResponse", extFile, responseFui);
return {
id: extFile.id,
serverResponse: responseFui,
diff --git a/src/files-ui/core/upload/upload.ts b/src/files-ui/core/upload/upload.ts
index 2c4dfcdb6ea620de35e6ed60677bfd294f6c9949..236c2fbf019f4e983ee8a79ce3f8663f3f5bf249 100644
--- a/src/files-ui/core/upload/upload.ts
+++ b/src/files-ui/core/upload/upload.ts
@@ -4,6 +4,7 @@ import addExtraDataUpload from "./addExtraData.upload";
import addHeaders from "./addheaders.upload";
import { ABORTED_ERROR_RESPONSE, NO_XHR_PROVIDED_ERROR, TIMEOUT_ERROR_RESPONSE, UNEXPECTED_ERROR_RESPONSE } from "./errors.upload";
import { JsonParseResponse, makeErrorUploadResponse, makeSuccessUploadResponse } from "./response.upload";
+import { completeUploadResult, unableToUploadResult } from "./utils.upload";
/**
@@ -23,30 +24,55 @@ export const uploadFormData = (
headers: Record<string, string> | undefined
) => {
return new Promise<ServerResponse>((resolve, reject) => {
- console.log("uploadFile", xhr, method, endpoint, data, headers);
+ console.log("Fui_uploadFormData uploadFile", xhr, method, endpoint, data, headers);
const finalMethod: Method = ["POST", "PUT", "PATCH"].includes(method.toUpperCase()) ? method : "POST";
+ let lastLastState: number = -1;
+ let lastState: number = 0;
+ let jumped: boolean = false;
+
xhr.upload.onload = () => {
- console.log("uploadFile onLoad", xhr.readyState, xhr.response);
+ console.log("Fui_uploadFormData uploadFile onLoad", xhr.readyState, xhr.response);
};
xhr.upload.ontimeout = () => resolve(TIMEOUT_ERROR_RESPONSE);
- xhr.upload.onabort = () => resolve(ABORTED_ERROR_RESPONSE);
+ xhr.upload.onabort = () => {
+ console.log("Fui_uploadFormData ABORTEEEEDDDD");
+ resolve(ABORTED_ERROR_RESPONSE);
+ };
+ xhr.onloadend = async (e) => {
+ console.log("onloadend loaded", e.loaded);
+ console.log("onloadend total", e.total);
+ console.log("onloadend lengthComputable", e.lengthComputable);
+
+ }
// listen for `progress` event
//currently listening on FileItem component hook
xhr.onreadystatechange = async (e) => {
//console.log("Finished", xhr);
- console.log("uploadFile onreadystatechange", xhr.readyState, xhr.response);
+
+ console.log("Fui_uploadFormData uploadFile onreadystatechange e.type", e.type);
+ console.log("Fui_uploadFormData uploadFile onreadystatechange", xhr.readyState, xhr.response);
+
+ lastLastState = lastState;
+ lastState = xhr.readyState;
+
if (xhr.readyState === 4) {
if (xhr.response !== "") {
//there is th answer
resolve(JsonParseResponse(xhr));
} else {
//error unexpected
- resolve(UNEXPECTED_ERROR_RESPONSE);
+ console.log("Fui_uploadFormData EMPTY status", xhr.status);
+ console.log("Fui_uploadFormData EMPTY readyState", xhr.readyState);
+ console.log("Fui_uploadFormData EMPTY upload", xhr.upload);
+ //console.log("Fui_uploadFormData EMPTY abort", xhr.abort);
+ //const jumped = lastLastState - lastLastState !== 1;
+ resolve(ABORTED_ERROR_RESPONSE);
+
}
} else {
- console.log("FuiUpload NOT YET" + xhr.readyState);
+ console.log("Fui_uploadFormData FuiUpload NOT YET" + xhr.readyState);
}
};
// open request
@@ -152,102 +178,11 @@ export function uploadFile(
});
}
-export const unableToUploadResult = (
- extFile: ExtFile
-): UploadResponse => {
- return {
- id: extFile.id,
- uploadedFile: {
- ...extFile,
- uploadMessage: "Unable to upload. XHR was not provided",
- uploadStatus: "error"
- },
- serverResponse: {
- }
- }
-}
-
-export const completeUploadResult = (
- extFile: ExtFile,
- serverResponse: ServerResponse,
- result: UPLOADSTATUS
-): UploadResponse => {
- return {
- id: extFile.id,
- uploadedFile: {
- ...extFile,
- uploadMessage: serverResponse.message,
- uploadStatus: result
- },
- serverResponse: serverResponse
- }
-}
-
-/**
- * @deprecated
- */
-export const uploadOnePromiseXHR = async (
- extFile: ExtFile,
- url: string,
- method?: Method,
- headers?: Record<string, string>,
- uploadLabel?: string,
- extraData?: Record<string, any>
-): Promise<UploadResponse> => {
- return new Promise(async (resolve, reject) => {
- try {
- const uploader: XMLHttpRequest | undefined = extFile.xhr;
- if (!uploader) {
- const duiUploadResponse: UploadResponse = unableToUploadResult(extFile);
- resolve(duiUploadResponse);
- return;
- }
- const localMethod: Method = (method) || "POST";
- const fileToUpload: File = extFile.file as File;
-
- const formData = new FormData();
- if (typeof uploadLabel === "string" && uploadLabel.length > 0) {
- formData.append(uploadLabel, fileToUpload
- //, extFile.file?.name
- );
- //add extraData that will be obtained from req.body
- } else
- formData.append("file", fileToUpload);
- const finalExtraData: Record<string, any> =
- { otherValue: "other valueee haaaa", param2: { tecnica: "KIKOHUUUU", friend: "Chaos", age: 25 }, ...extraData };
-
-
- if (finalExtraData) {
- const extraDataKeys: string[] = Object.keys(finalExtraData);
- extraDataKeys.forEach(key => {
- const finalValue: string = typeof finalExtraData[key] === "string" ? finalExtraData[key] : JSON.stringify(finalExtraData[key]);
- formData.append(key, finalValue);
- });
- }
- let serverResponse: ServerResponse;
- //console.log();
- serverResponse = await FuiUpload(uploader, localMethod, url, formData, headers || {});
- if (serverResponse.success) {
- const duiUploadResponse: UploadResponse = completeUploadResult(extFile, serverResponse, "success");
- resolve(duiUploadResponse);
- } else {
- // success is false
- const duiUploadResponse: UploadResponse = completeUploadResult(extFile, serverResponse, "error");
- resolve(duiUploadResponse);
- }
- } catch (error) {
- // on error
- console.log("uploadOnePromiseXHR ERROR", error);
- const duiUploadResponse: UploadResponse = unableToUploadResult(extFile);
- resolve(duiUploadResponse);
- }
- });
-};
/**
* @deprecated
diff --git a/src/files-ui/core/utils/fileListParser.ts b/src/files-ui/core/utils/fileListParser.ts
index 3e88083c8dd081cd83ad1a7936d149aa8cf6e5bf..46f4b4ad08d99d050434527d3eb14cc480e3e7a9 100644
--- a/src/files-ui/core/utils/fileListParser.ts
+++ b/src/files-ui/core/utils/fileListParser.ts
@@ -7,11 +7,11 @@ import { FileIdGenerator } from "./IdGenerator";
* @returns an array of ExtFile objects
*/
export const fileListToExtFileArray = (fileList: FileList): ExtFile[] => {
- let filesValidated: ExtFile[] = [];
+ let extFileArray: ExtFile[] = [];
for (let i = 0, f: File; (f = fileList[i]); i++) {
- filesValidated.push({ id: FileIdGenerator.getNextId(), file: f, name: f.name, size: f.size, type: f.type });
+ extFileArray.push({ id: FileIdGenerator.getNextId(), file: f, name: f.name, size: f.size, type: f.type });
}
- return filesValidated;
+ return extFileArray;
};
/**
@@ -20,9 +20,9 @@ export const fileListToExtFileArray = (fileList: FileList): ExtFile[] => {
* @returns an array of ExtFile instances
*/
export const fileListToExtFileInstanceArray = (fileList: FileList): ExtFileInstance[] => {
- let filesValidated: ExtFileInstance[] = [];
+ let extFileArray: ExtFileInstance[] = [];
for (let i = 0, f: File; (f = fileList[i]); i++) {
- filesValidated.push(new ExtFileInstance({ id: FileIdGenerator.getNextId(), file: f, name: f.name, size: f.size, type: f.type }));
+ extFileArray.push(new ExtFileInstance({ id: FileIdGenerator.getNextId(), file: f, name: f.name, size: f.size, type: f.type }));
}
- return filesValidated;
+ return extFileArray;
};
\ No newline at end of file
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
diff --git a/src/files-ui/hooks/useDropzoneFileUpdater.ts b/src/files-ui/hooks/useDropzoneFileUpdater.ts
index 0456e5058517e0101c255a639ecc32ff8670a439..b1bb4dd4d71594d61b097edb7529dac67ce29346 100644
--- a/src/files-ui/hooks/useDropzoneFileUpdater.ts
+++ b/src/files-ui/hooks/useDropzoneFileUpdater.ts
@@ -1,5 +1,5 @@
import * as React from "react";
-import { CustomValidateFileResponse, ExtFile, ExtFileInstance, ExtFileManager, FileValidatorProps, Localization, validateExtFileList } from "../core";
+import { CustomValidateFileResponse, ExtFile, ExtFileInstance, ExtFileManager, FileValidatorProps, Localization, setNextUploadStatus, validateExtFileList } from "../core";
/**
* Effect for keeping track of changes
@@ -35,15 +35,34 @@ 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) {
+ //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 {
+ const currExtFileObj: ExtFile = value[extFileIndex];
+
+ setNextUploadStatus(extFileInstance, currExtFileObj);
+ }
+ })
+
+ /*if (arrOfExtFiles.length !== value.length || value.length === 0) {
return;
}
for (let i = 0; i < arrOfExtFiles.length; i++) {
@@ -55,7 +74,7 @@ const useDropzoneFileListUpdater = (
console.log("useDropzoneFileListUpdater onCancel i", i);
arrOfExtFiles[i].uploadStatus = undefined;
}
- }
+ } */
}
}
// eslint-disable-next-line