feat: clean upload button component

Author: DecampsRenan

package.json

@@ -42,10 +42,11 @@
     "db:seed": "dotenv -- cross-env node ./run-jiti ./prisma/seed/index.ts"
   },
   "dependencies": {
-    "@aws-sdk/client-s3": "3.922.0",
     "@base-ui-components/react": "1.0.0-beta.1",
     "@bearstudio/ui-state": "1.0.2",
     "@better-auth/expo": "1.3.27",
+    "@better-upload/client": "3.0.2",
+    "@better-upload/server": "3.0.2",
     "@fontsource-variable/inter": "5.2.8",
     "@headlessui/react": "2.2.9",
     "@hookform/resolvers": "5.2.2",
@@ -68,7 +69,6 @@
     "@tanstack/zod-adapter": "1.132.47",
     "@uidotdev/usehooks": "2.4.1",
     "better-auth": "1.3.27",
-    "better-upload": "2.0.3",
     "boring-avatars": "2.0.4",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",

pnpm-lock.yaml

@@ -1,60 +1,46 @@
 import type { Meta } from '@storybook/react-vite';
-import { useUploadFile } from 'better-upload/client';
 import { UploadIcon } from 'lucide-react';
-import { useForm } from 'react-hook-form';
 
-import {
-  Form,
-  FormField,
-  FormFieldController,
-  FormFieldError,
-} from '@/components/form';
 import { UploadButton } from '@/components/ui/upload-button';
 
-import { BookCover } from '@/features/book/book-cover';
-
 export default {
   title: 'Upload Button',
 } satisfies Meta<typeof UploadButton>;
 
 export const Default = () => {
-  const { control } = useUploadFile({ route: 'bookCover' });
-
   return (
     <UploadButton
-      control={control}
+      uploadRoute="bookCover"
       inputProps={{
-        accept: 'png,jpeg,gif',
+        accept: 'image/png,image/jpeg,image/gif',
       }}
-      onChange={(file) => console.log('uploaded file', file)}
+      onUploadSuccess={(file) => console.log('uploaded file', file)}
     />
   );
 };
 
 export const WithChildren = () => {
-  const { control } = useUploadFile({ route: 'bookCover' });
-
   return (
     <div className="flex space-x-2">
       <UploadButton
-        control={control}
-        onChange={(file) => console.log('uploaded file', file)}
+        uploadRoute="bookCover"
+        onUploadSuccess={(file) => console.log('uploaded file', file)}
       >
         <UploadIcon />
         Upload a new file
       </UploadButton>
 
       <UploadButton
-        control={control}
-        onChange={(file) => console.log('uploaded file', file)}
+        uploadRoute="bookCover"
+        onUploadSuccess={(file) => console.log('uploaded file', file)}
       >
         Upload a new file
         <UploadIcon />
       </UploadButton>
 
       <UploadButton
-        control={control}
-        onChange={(file) => console.log('uploaded file', file)}
+        uploadRoute="bookCover"
+        onUploadSuccess={(file) => console.log('uploaded file', file)}
       >
         Upload a new file
       </UploadButton>
@@ -63,73 +49,25 @@ export const WithChildren = () => {
 };
 
 export const Disabled = () => {
-  const { control } = useUploadFile({ route: 'bookCover' });
-
   return (
     <div className="flex space-x-2">
       <UploadButton
         disabled
-        control={control}
-        onChange={(file) => console.log('uploaded file', file)}
+        uploadRoute="bookCover"
+        onUploadSuccess={(file) => console.log('uploaded file', file)}
       >
         <UploadIcon />
         Upload a new file
       </UploadButton>
 
       <UploadButton
         disabled
-        control={control}
-        onChange={(file) => console.log('uploaded file', file)}
+        uploadRoute="bookCover"
+        onUploadSuccess={(file) => console.log('uploaded file', file)}
       >
         Upload a new file
         <UploadIcon />
       </UploadButton>
     </div>
   );
 };
-
-export const RealWorldUseCase = () => {
-  const form = useForm({
-    defaultValues: {
-      coverId: '',
-    },
-  });
-  const { control, uploadedFile } = useUploadFile({ route: 'bookCover' });
-
-  return (
-    <Form {...form}>
-      <FormField>
-        <FormFieldController
-          control={form.control}
-          type="custom"
-          name="coverId"
-          render={() => {
-            return (
-              <div className="max-w-xs">
-                <div className="relative mb-2">
-                  <span className="sr-only">Upload cover</span>
-                  <BookCover
-                    className="opacity-60"
-                    book={{
-                      title: 'Title',
-                      author: 'Author',
-                      coverId: uploadedFile?.objectKey,
-                    }}
-                  />
-
-                  <UploadButton
-                    className="absolute top-1/2 left-1/2 -translate-1/2 bg-black/50 text-white"
-                    variant="ghost"
-                    control={control}
-                    disabled={form.formState.isSubmitting}
-                  />
-                </div>
-                <FormFieldError />
-              </div>
-            );
-          }}
-        />
-      </FormField>
-    </Form>
-  );
-};

src/components/ui/upload-button.stories.tsx

@@ -1,12 +1,15 @@
 import {
+  type ClientUploadError,
   type FileUploadInfo,
-  type UploadHookControl,
-} from 'better-upload/client';
+  uploadFile,
+  type UploadStatus,
+} from '@better-upload/client';
+import { useIsMutating, useMutation } from '@tanstack/react-query';
 import { UploadIcon } from 'lucide-react';
 import {
   type ChangeEvent,
   type ComponentProps,
-  useEffect,
+  type ReactElement,
   useId,
   useRef,
 } from 'react';
@@ -15,75 +18,95 @@ import { cn } from '@/lib/tailwind/utils';
 
 import { Button } from '@/components/ui/button';
 
+import type { UploadRoutes } from '@/routes/api/upload';
+
 export type UploadButtonProps = {
-  control: UploadHookControl<false>;
+  uploadRoute: UploadRoutes;
   /**
    * Called only if the file was uploaded successfully.
    */
-  onChange?: (file: FileUploadInfo<'complete'>) => void;
+  onUploadSuccess?: (file: FileUploadInfo<'complete'>) => void;
+  onUploadStateChange?: <T extends UploadStatus>(
+    file: FileUploadInfo<T>
+  ) => void;
+  onError?: (error: Error | ClientUploadError) => void;
   inputProps?: ComponentProps<'input'>;
+  icon?: ReactElement;
 } & Omit<ComponentProps<typeof Button>, 'onChange'>;
 
-/**
- * Upload button that should be used with useUploadFile() better-upload hook.
- */
+export const useIsUploadingFiles = (uploadRoute: UploadRoutes) =>
+  useIsMutating({
+    mutationKey: ['fileUpload', uploadRoute],
+  }) > 0;
+
 export const UploadButton = ({
   children,
   inputProps,
-  control,
-  onChange,
+  onUploadStateChange,
+  onUploadSuccess,
+  onError,
   disabled,
+  icon,
+  uploadRoute,
   ...rest
 }: UploadButtonProps) => {
   const innerId = useId();
 
+  const uploadMutation = useMutation({
+    mutationKey: ['fileUpload', uploadRoute],
+    mutationFn: async (file: File) => {
+      return uploadFile({
+        file,
+        route: uploadRoute,
+        onFileStateChange: ({ file }) => {
+          onUploadStateChange?.(file);
+        },
+      });
+    },
+    onSuccess: ({ file }) => {
+      onUploadSuccess?.(file);
+    },
+    onError: (error) => {
+      onError?.(error);
+    },
+  });
+
   const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
     if (file) {
-      control.upload(file);
+      uploadMutation.mutate(file);
     }
   };
 
   const inputRef = useRef<HTMLInputElement>(null);
 
-  useEffect(() => {
-    if (!control.isSuccess || !control.uploadedFile) return;
-    // if success, it means the file was successfully uploaded
-    onChange?.(control.uploadedFile);
-  }, [control.isSuccess, control.uploadedFile, onChange]);
-
   return (
     <>
       <Button
         size={!children ? 'icon' : undefined}
-        loading={control.isPending}
-        disabled={control.isPending || disabled}
-        asChild
-        {...rest}
-      >
-        <label
-          tabIndex={0}
-          htmlFor={innerId}
-          onKeyDown={(keyboardEvent) => {
-            // Skip if the pressed key is neither enter or space
-            if (!['Enter', ' '].includes(keyboardEvent.key)) return;
+        loading={uploadMutation.isPending}
+        disabled={uploadMutation.isPending || disabled}
+        onClick={() => inputRef.current?.click()}
+        onKeyDown={(keyboardEvent) => {
+          // Skip if the pressed key is neither enter or space
+          if (!['Enter', ' '].includes(keyboardEvent.key)) return;
 
-            // Prevent space key to trigger page scroll (and Enter to bubble)
-            keyboardEvent.preventDefault();
+          // Prevent space key to trigger page scroll (and Enter to bubble)
+          keyboardEvent.preventDefault();
 
-            inputRef.current?.click();
-          }}
-        >
-          {!children ? <UploadIcon /> : children}
-        </label>
+          inputRef.current?.click();
+        }}
+        {...rest}
+      >
+        {!children ? (icon ?? <UploadIcon />) : children}
       </Button>
       <input
         {...inputProps}
         id={innerId}
         ref={inputRef}
         className={cn('hidden', inputProps?.className)}
         type="file"
-        disabled={control.isPending || disabled}
+        disabled={uploadMutation.isPending || disabled}
         onChange={(onChangeEvent) => {
           handleFileChange(onChangeEvent);
           inputProps?.onChange?.(onChangeEvent);

src/components/ui/upload-button.tsx

@@ -42,7 +42,7 @@ export const envClient = createEnv({
       .string()
       .optional()
       .transform((value) => value ?? (isDev ? 'gold' : 'plum')),
-    VITE_S3_BUCKET_PUBLIC_URL: z.string().url(),
+    VITE_S3_BUCKET_PUBLIC_URL: z.url(),
   },
   runtimeEnv: {
     ...envMetaOrProcess,

src/env/client.ts

@@ -25,6 +25,7 @@ export const BookCover = (props: {
     >
       {!!props.book.coverId && (
         <img
+          alt=""
           className="absolute inset-0 h-full w-full object-cover mix-blend-overlay"
           src={`${envClient.VITE_S3_BUCKET_PUBLIC_URL}/${props.book.coverId}`}
         />