---
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-tanstack"
  description="Displays a control for easier uploading of files directly to Supabase Storage"
/>

## Folder structure

<RegistryBlock itemName="dropzone-tanstack" />

## 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