Dropzone (File Upload)

<ComponentPreview name="dropzone-demo" description="An alert with an icon, title and description. The title says 'Heads up!' and the description is 'You can add components to your app using the cli.'." showCode={false} />

Installation

<BlockItem name="dropzone-tanstack" description="Displays a control for easier uploading of files directly to Supabase Storage" />

Folder structure

Introduction

Uploading files should be easy—this component handles the tricky parts for you.

The File Upload component makes it easy to add file uploads to your app, with built-in support for drag-and-drop, file type restrictions, image previews, and configurable limits on file size and number of files. All the essentials, ready to go.

Features

• Drag-and-drop support
• Multiple file uploads
• File size and count limits
• Image previews for supported file types
• MIME type restrictions
• Invalid file handling
• Success and error states with clear feedback

Usage

• Simply add this <Dropzone /> component to your page and it will handle the rest.
• For control over file upload, you can pass in a props object to the component.

import { Dropzone, DropzoneContent, DropzoneEmptyState } from '@/components/dropzone'
import { useSupabaseUpload } from '@/hooks/use-supabase-upload'

const FileUploadDemo = () => {
  const props = useSupabaseUpload({
    bucketName: 'test',
    path: 'test',
    allowedMimeTypes: ['image/*'],
    maxFiles: 2,
    maxFileSize: 1000 * 1000 * 10, // 10MB,
  })

  return (
    <div className="w-[500px]">
      <Dropzone {...props}>
        <DropzoneEmptyState />
        <DropzoneContent />
      </Dropzone>
    </div>
  )
}

export { FileUploadDemo }

Props

Further reading

• Creating buckets
• Access control
• Standard uploads