FileUpload
A drag-and-drop file upload component with robust file validation and progress tracking.
Installation
npx vayu-ui init #one time onlynpx vayu-ui add fileuploadnpx vayu-ui add -t fileupload #with test case needsUsage
Basic File Upload
Drop files here
or browse from your device
Max 10MB per file
Image Upload
Drop files here
or browse from your device
Max 10MB per file
Document Upload
Drop files here
or browse from your device
Max 10MB per file
<FileUpload
maxSize={10485760}
maxFiles={5}
accept="image/png, image/jpeg"
onUpload={(files) => console.log(files)}
>
<FileUpload.DropZone>
<FileUpload.DropZoneContent />
</FileUpload.DropZone>
<FileUpload.ErrorMessage />
<FileUpload.List />
<FileUpload.Actions />
</FileUpload>Anatomy
<FileUpload maxSize={10485760} accept="image/*" maxFiles={5}>
<FileUpload.DropZone>
<FileUpload.DropZoneContent />
</FileUpload.DropZone>
<FileUpload.ErrorMessage />
<FileUpload.List />
<FileUpload.Actions />
</FileUpload>Accessibility
- Keyboard support: DropZone is focusable and supports
Enter/Spaceto open file dialog. - ARIA attributes: Includes native
role="button"for the zone androle="list"for selected files. - Focus behavior: Focus correctly reverts to the DropZone smoothly if all uploaded items are cleared to prevent focus loss.
Screen reader behavior
Screen readers announce the DropZone using aria-label="Upload files..." and natively interpret the selected items as a dynamic, interactive list that updates upon file removal or addition.
Component Folder Structure
FileUpload/
├── DropZone.tsx
├── DropZoneContent.tsx
├── FileUpload.tsx
├── FileUploadActions.tsx
├── FileUploadErrorMessage.tsx
├── FileUploadItem.tsx
├── FileUploadList.tsx
├── hooks.ts
├── index.ts
├── types.ts
└── utils.tsxProps
FileUpload
| Prop | Type | Default | Description |
|---|---|---|---|
maxSize | number | - | Max allowed file size in bytes (e.g., 10485760 for 10MB). |
maxFiles | number | - | Max number of files allowed simultaneously. |
accept | string | - | Comma-separated list of supported MIME types or extensions. |
onUpload | (files: FileWithMeta[]) => void | - | Callback function triggered when the upload action fires. |