Dropzone (File Upload)

Installation

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.

'use client'
 
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