From 9e97e5a2906a042dfb4177e582bddf2cbd086d08 Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Sun, 5 Mar 2023 01:58:49 -0500
Subject: [PATCH] [WIP]: Fixed issue that set undefined the uploadMessage.
Missing solve issue that copies undefined attributes; However is not
critical.
---
.../dropzone-demo/AdvancedDropzoneDemo.jsx | 30 +++++++++++------
.../main-page/DropzoneMainPage.jsx | 6 ++--
.../dropzone/components/dropzone/Dropzone.tsx | 33 ++++++++++++-------
src/files-ui/core/types/ExtFile.ts | 9 ++---
src/files-ui/core/upload/utils.upload.ts | 13 ++++++--
5 files changed, 61 insertions(+), 30 deletions(-)
diff --git a/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.jsx b/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.jsx
index f71d0c7..7fb9aea 100644
--- a/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.jsx
+++ b/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.jsx
@@ -8,6 +8,7 @@ import {
} from "../../../files-ui";
import { useEffect, useState } from "react";
import axios from "axios";
+import { ExtFileInstance } from "../../../files-ui/core";
const REMOTE =
"https://files-ui-express-static-file-storage.vercel.app/39d33dff2d41b522c1ea276c4b82507f96b9699493d2e7b3f5c864ba743d9503";
//const LOCAL = "http://localhost/39d33dff2d41b522c1ea276c4b82507f96b9699493d2e7b3f5c864ba743d9503";
@@ -19,6 +20,15 @@ export default function AdvancedDropzoneDemo() {
const updateFiles = (incommingFiles) => {
console.log("incomming extFiles", incommingFiles);
+ const arrExtFIleInstances = incommingFiles.map(
+ (extFile) => new ExtFileInstance(extFile)
+ );
+ const listExtFileObjects = arrExtFIleInstances.map((extFileInstance) =>
+ extFileInstance.toExtFile()
+ );
+ console.log("incomming arrExtFIleInstances", arrExtFIleInstances);
+ console.log("incomming listExtFileObjects", listExtFileObjects);
+
setExtFiles(incommingFiles);
};
const onDelete = (id) => {
@@ -56,7 +66,7 @@ export default function AdvancedDropzoneDemo() {
}
}
const handleAbort = (id) => {
- // alert(id);
+ // alert(id);
setExtFiles(
extFiles.map((ef) => {
if (ef.id === id) {
@@ -65,16 +75,16 @@ export default function AdvancedDropzoneDemo() {
})
);
};
- const handleCancel= (id) => {
+ const handleCancel = (id) => {
// alert(id);
- setExtFiles(
- extFiles.map((ef) => {
- if (ef.id === id) {
- return { ...ef, uploadStatus: undefined };
- } else return { ...ef };
- })
- );
- };
+ setExtFiles(
+ extFiles.map((ef) => {
+ if (ef.id === id) {
+ return { ...ef, uploadStatus: undefined };
+ } else return { ...ef };
+ })
+ );
+ };
return (
<>
<Dropzone
diff --git a/src/components/demo-components/main-page/DropzoneMainPage.jsx b/src/components/demo-components/main-page/DropzoneMainPage.jsx
index 2ded2ed..adde2c9 100644
--- a/src/components/demo-components/main-page/DropzoneMainPage.jsx
+++ b/src/components/demo-components/main-page/DropzoneMainPage.jsx
@@ -41,13 +41,12 @@ const DropzoneMainPage = ({ darkMode = false }) => {
// minHeight="400px"
onChange={updateFiles}
value={files}
- maxFileSize={28 * 1024 * 10}
+ maxFileSize={28 * 1024 * 1024}
maxFiles={5}
- accept=".jpg, .png, application/json, video/*"
+ accept=".jpg, .png, application/json, video/*, .pdf"
fakeUpload
behaviour="add"
uploadConfig={{ autoUpload: true , url:"fdbd"}}
- //uploadConfig={{ autoUpload: true, url:"fdbd" }}
>
{files.length > 0 &&
files.map((file) => (
@@ -62,6 +61,7 @@ const DropzoneMainPage = ({ darkMode = false }) => {
hd
onSee={handleSee}
resultOnTooltip
+ //uploadMessage="llalalal"
/>
))}
</Dropzone>
diff --git a/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx b/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
index 3d2476e..a5d4d61 100644
--- a/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
+++ b/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
@@ -319,22 +319,33 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
currentExtFileInstance.uploadStatus = uploadedFile.uploadStatus;
currentExtFileInstance.uploadMessage = uploadedFile.uploadMessage;
- console.log("fake uploadResponse currentExtFileInstance", currentExtFileInstance);
+ console.log(
+ "fake uploadResponse currentExtFileInstance",
+ currentExtFileInstance
+ );
+ console.log(
+ "fake uploadResponse currentExtFileInstance",
+ currentExtFileInstance.uploadStatus
+ );
+ console.log(
+ "fake uploadResponse currentExtFileInstance",
+ currentExtFileInstance.uploadMessage
+ );
+
+ console.log(
+ "pre sanitizeArrExtFile",
+ arrOfExtFilesInstances.map((F) => {return{status:F.uploadStatus,message:F.uploadMessage}})
+ );
- //add fake progress only on fakeupload
- /* if (fakeUpload) {
- console.log(
- "Adding fake progress",
- fakeUpload,
- uploadedFile.progress
- );
- currentExtFileInstance.progress = uploadedFile.progress;
- } */
//CHANGE
if (!(currentExtFileInstance.uploadStatus === "aborted"))
await sleepTransition();
+ console.log(
+ "pre sanitizeArrExtFile",
+ arrOfExtFilesInstances.map((F) => {return{status:F.uploadStatus,message:F.uploadMessage}})
+ );
handleFilesChange(sanitizeArrExtFile(arrOfExtFilesInstances), true);
if (uploadedFile.uploadStatus === "error") {
@@ -427,7 +438,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
): void => {
console.log(
"handleFilesChange",
- extFileList.map((F) => F.uploadStatus)
+ extFileList.map((F) => F.uploadMessage)
);
let finalExtFileList: ExtFile[] =
behaviour === "add" && !isUploading
diff --git a/src/files-ui/core/types/ExtFile.ts b/src/files-ui/core/types/ExtFile.ts
index 782b3f6..1a69b3a 100644
--- a/src/files-ui/core/types/ExtFile.ts
+++ b/src/files-ui/core/types/ExtFile.ts
@@ -200,7 +200,7 @@ export class ExtFileInstance {
}
- static toExtFile(extFile: ExtFileInstance): ExtFile {
+ static toExtFile(extFileInstance: ExtFileInstance): ExtFile {
const
{
id,
@@ -219,7 +219,7 @@ export class ExtFileInstance {
extraUploadData,
serverResponse,
downloadUrl
- } = extFile;
+ } = extFileInstance;
return {
id,
file,
@@ -276,8 +276,9 @@ export class ExtFileInstance {
extraUploadData,
serverResponse,
downloadUrl
- };
- return result;
+ } as ExtFile;
+ console.log("incomming result", { ...result });
+ return { ...result };
}
static mock = (): ExtFileInstance => {
diff --git a/src/files-ui/core/upload/utils.upload.ts b/src/files-ui/core/upload/utils.upload.ts
index 1aa9f90..316ab7f 100644
--- a/src/files-ui/core/upload/utils.upload.ts
+++ b/src/files-ui/core/upload/utils.upload.ts
@@ -124,8 +124,13 @@ export const sleepTransition = (time = 1500
}
export const sanitizeArrExtFile = (arrExtFile: ExtFileInstance[]): ExtFile[] => {
+ console.log(
+ "sanitizeArrExtFile",
+ arrExtFile.map((F) => { return { status: F.uploadStatus, message: F.uploadMessage } })
+ );
return arrExtFile.filter((extFileInstance: ExtFileInstance) =>
!extFileInstance.extraData?.deleted)
+
.map((extFileInstance: ExtFileInstance) => {
if (extFileInstance.uploadStatus === "aborted"
&& !extFileInstance.uploadMessage) {
@@ -133,7 +138,7 @@ export const sanitizeArrExtFile = (arrExtFile: ExtFileInstance[]): ExtFile[] =>
//extFileInstance.uploadStatus = "error";
}
- return extFileInstance.toExtFile()
+ return ExtFileInstance.toExtFile(extFileInstance) as ExtFile
});
}
/**
@@ -148,19 +153,23 @@ export const setNextUploadStatus = (
const prevStatus: UPLOADSTATUS | undefined = extFileInstance.uploadStatus;
const nextStstaus: UPLOADSTATUS | undefined = extFileobj.uploadStatus;
+ console.log("setNextUploadStatus", prevStatus, nextStstaus);
+ console.log("setNextUploadStatus", extFileInstance.uploadMessage, extFileobj.uploadMessage);
if (
prevStatus === "preparing" &&
["aborted", undefined].includes(nextStstaus)
) {
extFileInstance.uploadStatus = undefined;
+ extFileInstance.uploadMessage = extFileobj.uploadMessage;
+
} else if (
prevStatus === "uploading" &&
["aborted", undefined].includes(nextStstaus)
) {
extFileInstance.uploadStatus = "aborted";
+ extFileInstance.uploadMessage = extFileobj.uploadMessage;
}
- extFileInstance.uploadMessage = extFileobj.uploadMessage;
}
--
GitLab