File Upload
File upload patterns handle transfer state, progress, and validation for attached files.
Loading preview…
1
'use client';2
3
import { FileUploader } from 'sdaia-ui';4
5
export default function FileUploaderRealWorld() {Installation
npx sdaia-ui@latest add file-upload
Usage
import { FileUpload } from "@/components/ui/fileuploader"Examples
Default
Drag-and-drop upload area with a browse button and upload progress indicator.
Loading preview…
1
'use client';2
3
import { useRef, useState } from 'react';4
import { FileUploader, type FileUploaderFileEntry } from 'sdaia-ui';5
Error
When an upload fails, the row surfaces an error message and a retry action.
Loading preview…
API Reference
FileUploadBaseProps
Props for the FileUploadBase component.
Prop | Type | Default | Required |
|---|---|---|---|
label | ReactNode | 'Choose a file or drag & drop it here.' | optional |
helperText | ReactNode | 'JPEG, PNG, PDF, and GIF formats, up to 2MB' | optional |
showHelperText | boolean | true | optional |
showBrowseButton | boolean | true | optional |
browseLabel | ReactNode | 'Browse file' | optional |
disabled | boolean | false | optional |
active | boolean | false | optional |
onBrowse | MouseEventHandler<HTMLButtonElement> | - | optional |
dir | 'ltr' | 'rtl' | - | optional |
rtl | boolean | false (deprecated) | optional |