Dropzone (File Upload)

Installation

Set up the Supabase client

This block requires a Supabase client for Vue. If your project already has one, reuse it and update the block's imports to match your client. Otherwise, install the client:

Configure the environment variables described in the Vue client guide before using the block.

Install the block

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.

<script setup>
import { Dropzone, DropzoneContent, DropzoneEmptyState } from '@/components/dropzone'
import { useSupabaseUpload } from '@/composables/use-supabase-upload'
 
const upload = useSupabaseUpload({
  bucketName: 'test',
  path: 'test',
  allowedMimeTypes: ['image/*'],
  maxFiles: 2,
  maxFileSize: 1000 * 1000 * 10, // 10MB,
})
</script>
 
<template>
  <Dropzone v-bind="upload">
    <DropzoneEmptyState />
    <DropzoneContent />
  </Dropzone>
</template>

Props

Further reading

• Creating buckets
• Access control
• Standard uploads