Import
import { FileUploader } from "@sugarcoat/ui-nxt";Usage
<FileUploader
id="file-upload"
name="files"
label="Upload Files"
/>Examples#
Basic File Uploader#
Default File Uploader
With Custom Text#
Custom Button Text
Multiple Files#
Multiple File Selection
File Type Restrictions#
Images Only
PDF Documents
Multiple File Types
Display Variants#
The FileUploader supports two display variants: list (default) and preview.
List Variant
Preview Variant
Sizes#
Extra Small
Small
Medium (Default)
Large
Without Preview#
Disable the file preview display.
No Preview
Manual Upload Mode#
Control when files are uploaded with manual mode.
Manual Upload
Practical Examples#
Avatar Upload
Document Submission
Image Gallery Upload
Features#
- File Type Filtering: Restrict uploads to specific file types with
accept - Multiple Files: Support single or multiple file selection
- List View: Display uploaded files in a compact list
- Preview View: Show image thumbnails in a grid layout
- Upload Progress: Visual progress indicator during uploads
- Status Indicators: Show success, failure, and uploading states
- Remove Files: Allow users to remove selected files
- Manual Upload: Control upload timing with manual mode
- Custom Headers: Pass custom headers for API authentication
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| idrequired | string | - | Unique identifier for the input element |
| namerequired | string | - | Name attribute for the file input |
| label | string | - | Label text displayed above the uploader |
| text | string | - | Custom button text (defaults to 'Choose file' or 'Choose files') |
| icon | ReactNode | - | Custom icon for the upload button |
| accept | string | - | Accepted file types (e.g., 'image/*', '.pdf') |
| multiple | boolean | false | Allow multiple file selection |
| variant | "list" | "preview" | "list" | Display variant for uploaded files |
| size | "xs" | "sm" | "md" | "lg" | "md" | Size of the uploader component |
| showPreview | boolean | true | Whether to show file previews |
| manualUpload | boolean | false | Require manual upload button click |
| actionUrl | string | - | URL endpoint for file uploads |
| headers | Record<string, string> | - | Custom headers for upload requests |
| onChange | (e: ChangeEvent<HTMLInputElement>) => void | - | Callback when files are selected |
| onRemove | (file: File, index: number) => void | - | Callback when a file is removed |