File Upload Dropzone Component | React Drag & Drop

0views

1/3

A drag-and-drop file upload zone with previews, progress tracking, validation, and retry logic. Use for image, video, or document uploads with server-side handling.

Installation

How to use

```bash
npm install @your-org/ui-components framer-motion lucide-react
```

```tsx
import FileUploadDropzone from '@your-org/ui-components/FileUploadDropzone';

function UploadForm() {
  const handleUpload = async (files: File[], onProgress) => {
    const formData = new FormData();
    files.forEach(f => formData.append('files', f));
    const res = await fetch('/api/upload', { method: 'POST', body: formData });
    return res.json(); // [{ id, url }]
  };

  return (
    <FileUploadDropzone
      accept="image/*,video/*,application/pdf"
      maxFiles={5}
      maxSize={10_485_760}
      onUpload={handleUpload}
      onChange={setFiles}
    />
  );
}
```

Dependencies

framer-motionlucide-react

Back to all components More Forms

File Upload Dropzone Component | React Drag & Drop

Related components

LoginForm UI Component

Inline Login Form