File Upload Component

The File Upload component provides a robust, user-friendly interface for uploading files. It supports drag-and-drop, multiple file selection, progress tracking, and comprehensive file validation.

Key Features

• Drag & Drop: Intuitive file dropping interface

• Progress Tracking: Real-time upload progress visualization

• File Validation: Type and size restrictions

• Multiple Layouts: Table and card view options

Basic Usage

1
<FileUpload
2
    id="basic-upload"
3
    label="Upload Files"
4
    accept={['.jpg', '.png', '.pdf']}
5
    maxSize={5}
6
/>

Layout Variants

Choose between two display styles for uploaded files, drag a file into the upload area’s below to see it in action. Your files will not be uploaded, this is a demo:

Table Layout (Default)

Card Layout

States

Disabled State

Error State

Upload Component Props API

Upload Functions API

The component provides several functions to manage the upload lifecycle.

File Validation

• File Type: Validates against accept prop

• File Size: Enforces maxSize limit

• Multiple Files: Respects multiple prop setting

• Max Files: Respects maxFiles limit

• Custom Validation: Supports additional validation through handlers

Custom Validation

The component supports additional validation through handlers. You can set the validateFileHandler prop to a function that returns a boolean value indicating whether the file is valid.

Uploading The Files

This component doesn’t handle the file upload, it only provides a UI for the user to upload files. You need to handle the file upload in your own code defined in the uploadFileHandler function.