File Multi Upload
File Multi Upload provides a drag-and-drop interface for selecting and uploading multiple files. Each file has its own progress tracking, status, and can be managed individually. Perfect for batch uploads and document management.
Example
Upload Files
Files supported: .pdf, .doc, .docx, .txt
Props
Prop | Type | Default value | Description |
|---|---|---|---|
Prop title | Type string | Default value undefined | Description Title text displayed in the file multi-upload component |
Prop files | Type Array<FileUploadItem> | Default value [] | Description Array of file objects, each with id, name, size, status, progress, and optional errorMessage |
Prop supportedFileTypes | Type Array<string> | Default value [] | Description Array of allowed file extensions (e.g., [".pdf", ".doc", ".docx"]) |
Prop onFileSelect | Type (file: File) => void | Default value undefined | Description Callback function called when a file is selected. Receives the File object. |
Prop onFileRemove | Type (fileId: string) => void | Default value undefined | Description Callback function called when a file is removed. Receives the file ID. |
Prop onFileRetry | Type (fileId: string) => void | Default value undefined | Description Callback function called when retry is clicked for a failed file. Receives the file ID. |
Prop onFileFailure | Type () => void | Default value undefined | Description Callback function called when any file upload fails |
FileUploadItem Interface
Prop | Type | Default value | Description |
|---|---|---|---|
Prop id | Type string | Default value '' | Description Unique identifier for the file |
Prop name | Type string | Default value '' | Description Name of the file |
Prop size | Type number | Default value '' | Description Size of the file in bytes |
Prop status | Type "uploading" | "success" | "error" | Default value '' | Description Current status of the file upload |
Prop progress | Type number | Default value 0 | Description Upload progress (0-100) |
Prop errorMessage | Type string | Default value undefined | Description Error message when status is "error" |
Quick Start
import { FileMultiUpload } from '@clickhouse/click-ui'
import { useState } from 'react'
interface FileUploadItem {
id: string
name: string
size: number
status: 'uploading' | 'success' | 'error'
progress: number
}
function MyFileMultiUpload() {
const [files, setFiles] = useState<FileUploadItem[]>([])
return (
<FileMultiUpload
title="Upload Files"
files={files}
onFileSelect={(file) => {
const newFile = {
id: Math.random().toString(),
name: file.name,
size: file.size,
status: 'uploading' as const,
progress: 0
}
setFiles(prev => [...prev, newFile])
}}
onFileRemove={(fileId) => {
setFiles(prev => prev.filter(f => f.id !== fileId))
}}
/>
)
}Related Components
- FileUpload: For single file uploads instead of multiple.
- ProgressBar: Used internally for individual file progress.
- Container: For organizing file uploads within forms.
Common Use Cases
Multiple Files Uploading
Upload Files
Files supported: .txt, .sql
document1.pdf
45%
document2.pdf
80%
document3.pdf
512.0 B
import { FileMultiUpload } from '@clickhouse/click-ui'
import { useState } from 'react'
function MultipleFiles() {
const [files, setFiles] = useState([
{ id: '1', name: 'document1.pdf', size: 1024, status: 'uploading', progress: 45 },
{ id: '2', name: 'document2.pdf', size: 2048, status: 'success', progress: 100 }
])
return (
<FileMultiUpload
title="Upload Files"
files={files}
onFileRemove={(id) => setFiles(prev => prev.filter(f => f.id !== id))}
/>
)
}