File Upload
File Uploads are used to allow users to select and upload files from their local device to a web application. They are commonly used in forms, content management systems, and any scenario where file submission is required.
Loading Code Block...Installation
Section titled “Installation”To get started, install Butterfly DS via aqua:
Loading Code Block...Loading Code Block...Variants
Section titled “Variants”Loading Code Block...Disabled
Section titled “Disabled”Loading Code Block...| Props | Default | Type | Description |
|---|---|---|---|
| variantType | drag | 'drag' | 'image' | 'profile' | The variant type of the file upload component |
| maxFiles | 2 | number | The maximum number of files that can be uploaded |
| multiple | false | boolean | Whether to allow multiple file uploads |
| maxFileSize | 5 | number | The maximum file size allowed for uploads in MB |
| disabled | false | boolean | Whether the file upload component is disabled |
| onFileUpload | - | function | Callback function triggered when files are uploaded |
| showSizeInfo | true | boolean | Whether to show size restrictions on file uploads |
| accept | all | 'image' | 'document' | 'pdf' | 'all' | The file types that are accepted for upload, e.g., 'image/*' for images |
| title | Upload Image | string | Title displayed in the file upload area |
| description | Click to upload | string | Description displayed in the file upload area |
| className | - | string | Custom CSS class for additional styling |