Files
supabase/apps/ui-library/content/docs/react/dropzone.mdx
T
Ivan Vasilov 33127bb6ab feat: Library (#34294)
* Copy the design-system app into a new one for ui-library.

* Remove unneeded content.

* Add supabase config.

* Cleanup the css.

* Add bunch of packages.

* Cleanup the registry.

* Regenerate the registry.

* Add needed components for documenting components.

* Add the pages for the components.

* Fix the RegistryBlock.

* Various fixes.

* Add a turbo definition for ui-library.

* Rename Remix to React Router.

* Reorder the pages for all frameworks.

* Remove the bottom pager.

* Fix the pages and command menu.

* Various fixes.

* Minor fixes.

* Add ai editor rules.

* Various fixes.

* Add local supabase env vars.

* Try to fix a package error.

* Bunch of various fixes.

* Fix lint errors.
2025-03-20 22:11:07 +01:00

45 lines
1.5 KiB
Plaintext

---
title: Dropzone (File Upload)
description: Displays a control for easier uploading of files directly to Supabase Storage
---
<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.'."
/>
## Installation
<BlockItem
name="dropzone-react"
description="Displays a control for easier uploading of files directly to Supabase Storage"
/>
## Folder structure
<RegistryBlock itemName="dropzone-react" />
## Introduction
The File Upload component is designed to allow users to upload files with specific features and restrictions. It supports drag-and-drop functionality, MIME type restrictions, image previews, and configurable limits on file size and number of files.
## Features
1. **Drag-and-Drop**. Support drag-and-drop functionality for adding files.
1. **MIME Type Restriction**. Only allow specific MIME types.
1. **Invalid File Handling**. Allow users to remove invalid files from the list. Display a tooltip with error information for invalid files.
1. **Image Previews**. Display previews for image files.
1. **Error Handling**. Show error messages if the upload fails due to network or server errors.
1. **Success Handling**. Display a success message and clear the file list upon successful upload.
1. **Configurable Limits**. Allow configuration of file size limits and the maximum number of files.
## Usage
## Examples