From 6b097e08605b57def8f54f3ecdf7b1389a7c93d7 Mon Sep 17 00:00:00 2001
From: Juan Di Toro <ditorojuanf@gmail.com>
Date: Fri, 29 Mar 2024 00:09:14 +0100
Subject: [PATCH] fix: a tiny bit better upload ui

---
 app/components/general-layout.tsx | 42 +++----------------------------
 app/components/lib/uppy.ts        |  7 ++----
 2 files changed, 5 insertions(+), 44 deletions(-)

diff --git a/app/components/general-layout.tsx b/app/components/general-layout.tsx
index f740ef1..568013c 100644
--- a/app/components/general-layout.tsx
+++ b/app/components/general-layout.tsx
@@ -174,13 +174,6 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren) => {
     </PinningProvider>
   );
 };
-
-const UploadFormSchema = z.object({
-  uppyFiles: z.array(z.any()).min(1, {
-    message: "At least one file must be uploaded",
-  }),
-});
-
 const UploadFileForm = () => {
   const {
     getRootProps,
@@ -193,44 +186,21 @@ const UploadFileForm = () => {
     upload,
   } = useUppy();
 
-  const [form, fields] = useForm({
-    constraint: getZodConstraint(UploadFormSchema),
-    shouldValidate: "onInput",
-    onValidate: ({ formData }) => {
-      const result = parseWithZod(formData, {
-        schema: UploadFormSchema,
-      });
-      return result;
-    },
-    onSubmit: (e) => {
-      e.preventDefault();
-      return upload();
-    },
-  });
-
   const inputProps = getInputProps();
-  const files = useInputControl({
-    key: fields.uppyFiles.key,
-    name: fields.uppyFiles.name,
-    formId: form.id
-  });
 
   const isUploading = state === "uploading";
   const isCompleted = state === "completed";
   const hasErrored = state === "error";
   const hasStarted = state !== "idle" && state !== "initializing";
-  const isValid = form.valid || getFiles().length > 0;
+  const isValid = getFiles().length > 0;
   const getFailedState = (id: string) =>
     failedFiles.find((file) => file.id === id);
 
-  console.log({ files: getFiles() });
-
   return (
     <>
       <DialogHeader className="mb-6">
         <DialogTitle>Upload Files</DialogTitle>
       </DialogHeader>
-      <Form {...getFormProps(form)} className="flex flex-col">
         {!hasStarted ? (
           <div
             {...getRootProps()}
@@ -240,13 +210,8 @@ const UploadFileForm = () => {
               aria-hidden
               key={new Date().toISOString()}
               multiple
-              name={fields.uppyFiles.name}
+              name="uppyFiles[]"
               {...inputProps}
-              value={files.value}
-              onChange={() => {
-                //@ts-expect-error -- conform has shitty typeinference for controls
-                files.change(getFiles());
-              }}
             />
             <CloudUploadIcon className="w-24 h-24 stroke stroke-primary-dark" />
             <p>Drag & Drop Files or Browse</p>
@@ -268,7 +233,6 @@ const UploadFileForm = () => {
 
         <ErrorList
           errors={[
-            ...(fields.uppyFiles.errors ?? []),
             ...(hasErrored ? ["An error occurred"] : []),
           ]}
         />
@@ -302,12 +266,12 @@ const UploadFileForm = () => {
           <Button
             type="submit"
             size={"lg"}
+            onClick={isValid ? upload : () => {}}
             className="mt-6"
             disabled={!isValid}>
             Upload
           </Button>
         ) : null}
-      </Form>
     </>
   );
 };
diff --git a/app/components/lib/uppy.ts b/app/components/lib/uppy.ts
index b342ea7..4fbd6d0 100644
--- a/app/components/lib/uppy.ts
+++ b/app/components/lib/uppy.ts
@@ -57,14 +57,12 @@ export function useUppy() {
     "completed" | "idle" | "initializing" | "error" | "uploading"
   >("initializing");
 
-  const [inputProps, setInputProps] = useState<
-    | {
+  const [inputProps, setInputProps] = useState<{
         ref: typeof inputRef;
         type: "file";
         onChange: (event: ChangeEvent<HTMLInputElement>) => void;
       }
-    | object
-  >({});
+  >();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [failedFiles, setFailedFiles] = useState<FailedUppyFile<Record<string, any>, Record<string, any>>[]>([])
   const getRootProps = useMemo(
@@ -76,7 +74,6 @@ export function useUppy() {
             //@ts-expect-error -- dumb html
             inputRef.current.value = null;
             inputRef.current.click();
-            console.log("clicked", { input: inputRef.current });
           }
         },
         role: "presentation",