From 36ca2793014689fdeb6b007afd03c4186645e2e2 Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Wed, 15 Mar 2023 22:12:49 -0500
Subject: [PATCH] [FIX]: Solve issue on end of upload, there was missing the
setLocalFIles call to update
---
.../dropzone-demo/AdvancedDropzoneDemo.jsx | 3 +-
.../dropzone/components/dropzone/Dropzone.tsx | 51 +++++++------------
src/files-ui/hooks/useDropzoneFileUpdater.ts | 5 +-
src/pages/demo/DropzoneDemoPage.jsx | 2 +-
4 files changed, 25 insertions(+), 36 deletions(-)
diff --git a/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.jsx b/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.jsx
index 475319b..56b68a9 100644
--- a/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.jsx
+++ b/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.jsx
@@ -19,7 +19,8 @@ export default function AdvancedDropzoneDemo() {
const [videoSrc, setVideoSrc] = React.useState(undefined);
const updateFiles = (incommingFiles) => {
- console.log("incomming extFiles", incommingFiles);
+ console.log("incomming extFiles outside", incommingFiles.map(x=>x.uploadStatus));
+
const arrExtFIleInstances = incommingFiles.map(
(extFile) => new ExtFileInstance(extFile)
);
diff --git a/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx b/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
index 8f2a0af..5b0dde5 100644
--- a/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
+++ b/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
@@ -32,7 +32,7 @@ import { mergeProps } from "../../../overridable";
import InputHidden from "../../../input-hidden/InputHidden";
import {
defaultDrozoneProps,
- DEFAULT_BORDER_RADIUS,
+ // DEFAULT_BORDER_RADIUS,
//DropzoneActionButton,
DropzoneActions,
DropzoneProps,
@@ -219,17 +219,29 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
* @returns nothing
*/
const uploadfiles = async (localFiles: ExtFile[]): Promise<void> => {
+ console.log(
+ "incomming extfiles uploadfiles localFiles",
+ localFiles.map((x) => x.uploadStatus)
+ );
//set uploading flag to true
setIsUploading(true);
//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;
}
+ if (localFiles.length === 0) {
+ setLocalMessage(DropzoneLocalizer.noFilesMessage as string);
+ setTimeout(() => {
+ setIsUploading(false);
+ }, 1500);
+ return;
+ }
// initialize a new list of ExtFileInstances
let arrOfExtFilesInstances: ExtFileInstance[] = [];
@@ -251,11 +263,13 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
//no missing to upload
if (!(missingUpload > 0)) {
console.log("upload start: noFilesMessage", missingUpload);
+ setTimeout(() => {
+ if (noMissingFilesLabel)
+ setLocalMessage(DropzoneLocalizer.noFilesMessage as string);
- if (noMissingFilesLabel)
- setLocalMessage(DropzoneLocalizer.noFilesMessage as string);
+ setIsUploading(false);
+ }, 1500);
- setIsUploading(false);
return;
}
@@ -365,37 +379,10 @@ 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.uploadStatus
- );
- console.log(
- "fake uploadResponse currentExtFileInstance",
- currentExtFileInstance.uploadMessage
- );
-
- console.log(
- "pre sanitizeArrExtFile",
- arrOfExtFilesInstances.map((F) => {
- return { status: F.uploadStatus, message: F.uploadMessage };
- })
- );
-
//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") {
@@ -408,7 +395,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
}
}
- handleFilesChange(sanitizeArrExtFile(arrOfExtFilesInstances), true);
+ setLocalFiles(sanitizeArrExtFile(arrOfExtFilesInstances));
// upload group finished :D
onUploadFinish?.(serverResponses);
diff --git a/src/files-ui/hooks/useDropzoneFileUpdater.ts b/src/files-ui/hooks/useDropzoneFileUpdater.ts
index a776c66..267cbd3 100644
--- a/src/files-ui/hooks/useDropzoneFileUpdater.ts
+++ b/src/files-ui/hooks/useDropzoneFileUpdater.ts
@@ -25,8 +25,9 @@ const useDropzoneFileListUpdater = (
localization?: Localization,
validateFilesFlag?: boolean
): [ExtFile[], number, React.Dispatch<React.SetStateAction<ExtFile[]>>] => {
-
- console.log("FileListUpdater",dropzoneId, value, isUploading, maxFileSize, accept, maxFiles, validateFilesFlag);
+ console.log("incomming extfiles fileupdater value", value.map(x => x.uploadStatus));
+
+ console.log("FileListUpdater", dropzoneId, value, isUploading, maxFileSize, accept, maxFiles, validateFilesFlag);
//state for managing the files locally
const [localFiles, setLocalFiles] = React.useState<ExtFile[]>([]);
diff --git a/src/pages/demo/DropzoneDemoPage.jsx b/src/pages/demo/DropzoneDemoPage.jsx
index 2ebc285..e5d4725 100644
--- a/src/pages/demo/DropzoneDemoPage.jsx
+++ b/src/pages/demo/DropzoneDemoPage.jsx
@@ -1,5 +1,5 @@
-import { Paper, Alert, AlertTitle } from "@mui/material";
import * as React from "react";
+import { Paper, Alert, AlertTitle } from "@mui/material";
import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
import BasicDropzoneCodeJS from "../../components/demo-components/dropzone-demo/BasicDropzoneCodeJS";
--
GitLab