Drag drop (#341)

* Add new drag and drop file input

* catch error

Author: krystian50

package-lock.json

@@ -44,6 +44,7 @@
     "path-browserify": "^1.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-dropzone": "^14.3.8",
     "react-intersection-observer": "^9.13.1",
     "react-katex": "^3.0.1",
     "react-number-format": "^5.4.2",

package.json

@@ -11,6 +11,7 @@ import { ProgramFileUpload } from "@/components/ProgramLoader/ProgramFileUpload.
 import { useNavigate } from "react-router";
 import { Links } from "./Links";
 import { Separator } from "../ui/separator";
+import { TriangleAlert } from "lucide-react";
 
 export const Loader = ({ setIsDialogOpen }: { setIsDialogOpen?: (val: boolean) => void }) => {
   const dispatch = useAppDispatch();
@@ -26,7 +27,7 @@ export const Loader = ({ setIsDialogOpen }: { setIsDialogOpen?: (val: boolean) =
   }, [isLoading]);
 
   const handleLoad = useCallback(
-    async (_event: unknown, program?: ProgramUploadFileOutput) => {
+    async (program?: ProgramUploadFileOutput) => {
       setIsSubmitted(true);
 
       if (!programLoad && !program) return;
@@ -50,35 +51,39 @@ export const Loader = ({ setIsDialogOpen }: { setIsDialogOpen?: (val: boolean) =
 
   return (
     <div className="flex flex-col w-full h-full bg-card">
-      <h2 className="text-lg sm:mb-4 bg-brand-dark dark:bg-brand/65 text-white text-xs font-light px-3 py-2 sm:rounded-ss-lg sm:rounded-se-lg">
+      <h2 className="sm:mb-4 bg-brand-dark dark:bg-brand/65 text-white text-xs font-light px-3 py-2 sm:rounded-ss-lg sm:rounded-se-lg">
         Start with an example program or upload your file
       </h2>
       <div className="flex flex-col p-7 justify-around h-full">
         <Examples
           onProgramLoad={(val) => {
             setProgramLoad(val);
             setIsSubmitted(false);
-            handleLoad(undefined, val);
+            handleLoad(val);
           }}
         />
 
-        <ProgramFileUpload
-          onFileUpload={(val) => {
-            setProgramLoad(val);
-            setIsSubmitted(false);
-          }}
-          onParseError={(error) => {
-            setError(error);
-          }}
-        />
+        <div className="mt-2 mb-6">
+          <ProgramFileUpload
+            onFileUpload={(val) => {
+              setProgramLoad(val);
+              setIsSubmitted(false);
+              // handleLoad(val);
+            }}
+          />
+        </div>
         <Links />
-        {error && isSubmitted && <p className="text-red-500 whitespace-pre-line">{error}</p>}
+        {error && isSubmitted && (
+          <p className="flex items-center text-destructive-foreground mt-3 text-[11px] whitespace-pre-line">
+            <TriangleAlert className="mr-2" height="18px" /> {error}
+          </p>
+        )}
       </div>
       <div className="px-5">
         <Separator />
       </div>
       <div className="m-6 mb-9 flex justify-end">
-        <Button className="mt-3 min-w-[92px]" id="load-button" type="button" onClick={handleLoad}>
+        <Button className="mt-3 min-w-[92px]" id="load-button" type="button" onClick={() => handleLoad()}>
           Load
         </Button>
       </div>

src/components/ProgramLoader/Loader.tsx

@@ -1,14 +1,25 @@
-import { Input } from "../ui/input";
-import { ProgramUploadFileOutput } from "./types";
+import { useDropzone } from "react-dropzone";
+import { ProgramUploadFileInput, ProgramUploadFileOutput } from "./types";
 import { mapUploadFileInputToOutput } from "./utils";
 import { decodeStandardProgram } from "@typeberry/pvm-debugger-adapter";
 import { MemoryChunkItem, PageMapItem, RegistersArray } from "@/types/pvm.ts";
 import { SafeParseReturnType, z } from "zod";
 import { useAppSelector } from "@/store/hooks";
 import { selectInitialState } from "@/store/debugger/debuggerSlice";
 import { getAsChunks, getAsPageMap } from "@/lib/utils.ts";
+import { TriangleAlert, UploadCloud } from "lucide-react";
+import { Button } from "../ui/button";
+import { useState } from "react";
 
-const validateJsonTestCaseSchema = (json: unknown) => {
+type ProgramFileUploadProps = {
+  onFileUpload: (val: ProgramUploadFileOutput) => void;
+  close?: () => void;
+};
+
+type RawProgramUploadFileInput = unknown;
+type ValidationResult = SafeParseReturnType<RawProgramUploadFileInput, ProgramUploadFileInput>;
+
+const validateJsonTestCaseSchema = (json: RawProgramUploadFileInput): ValidationResult => {
   const pageMapSchema = z.object({
     address: z.number(),
     length: z.number(),
@@ -38,10 +49,8 @@ const validateJsonTestCaseSchema = (json: unknown) => {
   return schema.safeParse(json);
 };
 
-const generateErrorMessageFromZodValidation = (result: SafeParseReturnType<unknown, unknown>) => {
-  if (!result.error) {
-    return false;
-  }
+const generateErrorMessageFromZodValidation = (result: ValidationResult): string => {
+  if (!result.error) return "Unknown error occurred";
 
   const formattedErrors = result.error.errors.map((err) => {
     const path = err.path.join(" > ") || "root";
@@ -51,18 +60,9 @@ const generateErrorMessageFromZodValidation = (result: SafeParseReturnType<unkno
   return `File validation failed with the following errors:\n\n${formattedErrors.join("\n")}`;
 };
 
-export const ProgramFileUpload = ({
-  onFileUpload,
-  onParseError,
-  close,
-}: {
-  onFileUpload: (val: ProgramUploadFileOutput) => void;
-  onParseError: (error: string) => void;
-  close?: () => void;
-}) => {
+export const ProgramFileUpload: React.FC<ProgramFileUploadProps> = ({ onFileUpload, close }) => {
   const initialState = useAppSelector(selectInitialState);
-
-  let fileReader: FileReader;
+  const [error, setError] = useState<string>();
 
   const handleFileRead = (e: ProgressEvent<FileReader>) => {
     const arrayBuffer = e.target?.result;
@@ -78,7 +78,7 @@ export const ProgramFileUpload = ({
 
         if (!result.success) {
           const errorMessage = generateErrorMessageFromZodValidation(result);
-          onParseError(errorMessage || "");
+          setError(errorMessage || "");
         } else {
           onFileUpload(mapUploadFileInputToOutput(jsonFile));
         }
@@ -112,30 +112,48 @@ export const ProgramFileUpload = ({
           });
         }
       }
+    } else {
+      setError("Failed to read the file");
     }
   };
 
-  const handleProgramUpload = (file: Blob) => {
-    fileReader = new FileReader();
-    fileReader.onloadend = handleFileRead;
-    fileReader.readAsArrayBuffer(file);
+  const onDrop = (acceptedFiles: File[]) => {
+    if (acceptedFiles.length) {
+      const file = acceptedFiles[0];
+      const fileReader = new FileReader();
+      fileReader.onloadend = handleFileRead;
+      fileReader.readAsArrayBuffer(file);
+      close?.();
+    }
   };
 
+  const { getRootProps, getInputProps, open } = useDropzone({
+    onDrop,
+    accept: { "application/octet-stream": [".bin", ".pvm"], "application/json": [".json"] },
+    noClick: true,
+  });
+
   return (
-    <div className="pb-5">
-      <Input
-        className="mt-5 mr-3"
-        id="test-file"
-        type="file"
-        accept=".bin,.pvm,.json"
-        onClick={(e) => e.stopPropagation()}
-        onChange={(e) => {
-          if (e.target.files?.length) {
-            handleProgramUpload(e.target.files[0]);
-            close?.();
-          }
-        }}
-      />
+    <div>
+      <div
+        {...getRootProps()}
+        className="flex items-center justify-between border-dashed border-2 py-3 px-4 rounded-lg w-full mx-auto"
+      >
+        <div className="flex items-center space-x-6">
+          <UploadCloud className="text-title-secondary-foreground" width="30px" height="30px" />
+          <p className="text-[10px] text-title-secondary-foreground">Select a file or drag and drop here</p>
+        </div>
+        <Button className="text-[10px] py-1 h-9" variant="outlineBrand" onClick={open}>
+          Select file
+        </Button>
+        <input {...getInputProps()} className="hidden" />
+      </div>
+
+      {error && (
+        <p className="flex items-center text-destructive-foreground mt-3 text-[11px] whitespace-pre-line">
+          <TriangleAlert className="mr-2" height="18px" /> {error}
+        </p>
+      )}
     </div>
   );
 };

src/components/ProgramLoader/ProgramFileUpload.tsx

@@ -41,7 +41,7 @@
     --accent-foreground: var(--foreground);
     /* Defaults */
     --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
+    --destructive-foreground: 1 61% 56%;
     /*  */
     --border: 0 0% 94%;
     --input: var(--border);

src/globals.css

@@ -72,7 +72,7 @@ const ProgramLoader = () => {
   }, []);
 
   return (
-    <div className="max-w-[505px] sm:my-[100px] max-sm:h-full sm:rounded-lg sm:border-2">
+    <div className="max-w-[505px] sm:my-[100px] sm:mr-[72px] max-sm:h-full sm:rounded-lg sm:border-2">
       <Loader />
     </div>
   );