Generic Drive

This section previews the dropzone generic drive component.

A custom Generic Drive dropzone, which is the file upload workflow copied from drive upload applications like proton and gmail drive.

Preview

0

About

UTUIDropzoneGenericDrive is build on top of Button, and Separator

Installation - CLI

npx shadcn@latest add https://uploadthing-ui.vercel.app/r/dropzone-generic-drive.json

Usage

Add inside of your client component

import UTUIDropzoneGenericDrive from "@/components/uploadthing-ui/dropzone-generic-drive";

Note:

Replace the fileRoute with which api route you want to use. fileRoute isn't typesafe,

<UTUIDropzoneGenericDrive
  UTUIFunctionsProps={{
    fileRoute: "imageUploader",
    onBeforeUploadBegin: (files) => {
      // Your additional code here
      console.log(files);

      return files;
    },
    onUploadBegin: (fileName) => {
      // Your additional code here
      console.log(fileName);
    },
    onUploadProgress: (progress) => {
      // Your additional code here
      console.log(progress);
    },
    onClientUploadComplete: (res) => {
      // Your additional code here
      console.log(res);
    },
    onUploadError: (error) => {
      // Your additional code here
      console.log(error);
    },
    onUploadAborted: (file) => {
      // Your additional code here
      console.log(file);
    },
  }}
/>