jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

enhancement: Update useFileDrop hook to handle multiple file drops (#3083)

Browse source 
* refactor: Update useFileDrop hook to handle multiple file drops

The useFileDrop hook in use-on-file-drop.tsx has been updated to handle multiple file drops. It now accepts an array of files instead of a single file, and processes each file individually. This allows for uploading multiple files at once and improves the user experience.

* [autofix.ci] apply automated fixes

* Remove unused console.log

* Removed console.log

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
This commit is contained in:
anovazzi1 2024-07-30 17:55:23 -03:00 • committed by GitHub
commit f352c53e70
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 56 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

92
src/frontend/src/pages/MainPage/hooks/use-on-file-drop.tsx
View file

@ -1,4 +1,5 @@
import { useLocation } from "react-router-dom";
import { XYPosition } from "reactflow";
import {
CONSOLE_ERROR_MSG,
UPLOAD_ALERT_LIST,
@ -7,7 +8,20 @@ import {
import useAlertStore from "../../../stores/alertStore";
import { useFolderStore } from "../../../stores/foldersStore";
const useFileDrop = (uploadFlow, type) => {
const useFileDrop = (
uploadFlow: ({
newProject,
file,
isComponent,
position,
}: {
newProject: boolean;
file?: File;
isComponent: boolean | null;
position?: XYPosition;
}) => Promise<string | never>,
type,
) => {
const location = useLocation();
const setSuccessData = useAlertStore((state) => state.setSuccessData);
const setErrorData = useAlertStore((state) => state.setErrorData);
@ -18,46 +32,52 @@ const useFileDrop = (uploadFlow, type) => {
const handleFileDrop = (e) => {
e.preventDefault();
if (e.dataTransfer.types.some((type) => type === "Files")) {
const file = e.dataTransfer.files.item(0);
const files: FileList = e.dataTransfer.files;
if (file.type === "application/json") {
const reader = new FileReader();
const uploadPromises: Promise<any>[] = [];
reader.onload = (event) => {
const fileContent = event.target!.result;
const fileContentJson = JSON.parse(fileContent as string);
const is_component = fileContentJson.is_component;
uploadFlow({
newProject: true,
file: file,
isComponent: type === "all" ? null : type === "component",
})
.then(() => {
setSuccessData({
title: `${
is_component ? "Component" : "Flow"
} uploaded successfully`,
});
getFolderById(folderId ? folderId : myCollectionId);
})
.catch((error) => {
setErrorData({
title: CONSOLE_ERROR_MSG,
list: [error],
});
});
};
reader.readAsText(file);
} else {
setErrorData({
title: WRONG_FILE_ERROR_ALERT,
list: [UPLOAD_ALERT_LIST],
});
for (let i = 0; i < files.length; i++) {
const file = files[i];
if (file.type === "application/json") {
const reader = new FileReader();
const FileReaderPromise: Promise<void> = new Promise(
(resolve, reject) => {
reader.onload = (event) => {
const fileContent = event.target!.result;
const fileContentJson = JSON.parse(fileContent as string);
const is_component = fileContentJson.is_component;
uploadFlow({
newProject: true,
file: file,
isComponent: type === "all" ? null : type === "component",
})
.then((_) => resolve())
.catch((error) => {
reject(error);
});
};
reader.readAsText(file);
},
);
uploadPromises.push(FileReaderPromise);
}
}
Promise.all(uploadPromises)
.then(() => {
setSuccessData({
title: `All files uploaded successfully`,
});
getFolderById(folderId ? folderId : myCollectionId);
})
.catch((error) => {
setErrorData({
title: CONSOLE_ERROR_MSG,
list: [error],
});
});
}
};
return [handleFileDrop];
};