# Advanced File Upload Component

> This React component provides a robust and customizable file upload experience, enhancing user interaction and handling various file types and sizes. It addresses the common need for controlled file uploads in web applications, offering features like drag-and-drop functionality, file validation (size and type), multiple file selection, and visual feedback.   The component works by utilizing React's useState and useRef hooks to manage component state and DOM elements.  A file input element is hidden, and the upload area is styled to provide a visually appealing drag-and-drop interface. When a file is selected (either by clicking or dropping), the processFiles function is invoked.  This function validates each file against specified size and type constraints.  Files that pass validation are added to the component's internal state, and their metadata (name, size, type, preview URL for images) is stored.  Errors are also tracked and displayed to the user.  The component exposes callbacks, onFilesSelect and onFilesRemove, allowing parent components to react to file selection and removal events.  Key features include:  *   **Drag-and-drop support:** Users can drag and drop files onto the upload area. *   **File validation:**  Checks file size and type against configurable limits. *   **Multiple file uploads:**  Allows for the selection of multiple files (configurable). *   **File preview (images):**  Displays a preview for image files. *   **Customizable acceptance:** Allows specifying accepted file types. *   **Error handling:**  Displays clear error messages for invalid files. *   **Clear file selection:**  Provides a mechanism to remove selected files. *   **Disabled state:**  Allows disabling the component.  This component can be used in various applications where file uploads are required, such as image galleries, document management systems, or cloud storage platforms.  For example, it could be integrated into a form for submitting documents or used in a media-sharing application to upload images and videos.  The component's flexibility makes it suitable for different use cases and design styles.  The component utilizes React's useState, useRef, and useCallback hooks for state management and performance optimization. It also leverages URL.createObjectURL for generating preview URLs for images, and URL.revokeObjectURL for cleanup.  The demo showcases how to customize the component's behavior and styling.

- Author: [Sonu](https://21st.dev/@uniquesonu)
- License: unknown
- Live preview: https://21st.dev/@uniquesonu/components/advanced-file-upload-component

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/uniquesonu/advanced-file-upload-component?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt