From 109b9a117276235d156b97ffe1de0d11734bdcb3 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Tue, 5 Sep 2023 14:21:47 -0300 Subject: [PATCH] Added error checking when file is not a JSON --- .../components/PageComponent/index.tsx | 9 +++++++- src/frontend/src/pages/MainPage/index.tsx | 21 +++++++++++++++---- 2 files changed, 25 insertions(+), 5 deletions(-) diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx index 620170fbb..4d8a4b3f4 100644 --- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx @@ -298,7 +298,14 @@ export default function Page({ setNodes((nds) => nds.concat(newNode)); } else if (event.dataTransfer.types.some((types) => types === "Files")) { takeSnapshot(); - uploadFlow(false, event.dataTransfer.files.item(0)!); + if (event.dataTransfer.files.item(0)!.type === "application/json") { + uploadFlow(true, event.dataTransfer.files.item(0)!); + } else { + setErrorData({ + title: "Invalid file type", + list: ["Please upload a JSON file"], + }); + } } }, // Specify dependencies for useCallback diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx index a599844eb..f45e4cfc8 100644 --- a/src/frontend/src/pages/MainPage/index.tsx +++ b/src/frontend/src/pages/MainPage/index.tsx @@ -7,6 +7,7 @@ import Header from "../../components/headerComponent"; import { SkeletonCardComponent } from "../../components/skeletonCardComponent"; import { Button } from "../../components/ui/button"; import { USER_PROJECTS_HEADER } from "../../constants/constants"; +import { alertContext } from "../../contexts/alertContext"; import { TabsContext } from "../../contexts/tabsContext"; export default function HomePage(): JSX.Element { const { @@ -19,6 +20,7 @@ export default function HomePage(): JSX.Element { uploadFlow, isLoading, } = useContext(TabsContext); + const { setErrorData } = useContext(alertContext); const dropdownOptions = [ { name: "Import from JSON", @@ -55,7 +57,14 @@ export default function HomePage(): JSX.Element { e.preventDefault(); setIsDragging(false); if (e.dataTransfer.types.some((types) => types === "Files")) { - uploadFlow(true, e.dataTransfer.files.item(0)!); + if (e.dataTransfer.files.item(0).type === "application/json") { + uploadFlow(true, e.dataTransfer.files.item(0)!); + } else { + setErrorData({ + title: "Invalid file type", + list: ["Please upload a JSON file"], + }); + } } }; @@ -108,14 +117,18 @@ export default function HomePage(): JSX.Element { onDragLeave={dragLeave} onDrop={fileDrop} className={ - "h-full w-full " + (isDragging - ? "flex flex-col items-center justify-center mb-24 gap-4 text-2xl font-light" + "h-full w-full " + + (isDragging + ? "mb-24 flex flex-col items-center justify-center gap-4 text-2xl font-light" : "") } > {isDragging ? ( <> - + Drop your flow here ) : (