---
title: File multi upload
description: File Multi Upload allows users to select and upload multiple files simultaneously with individual progress tracking for each file.
category: Forms
related: [FileUpload, ProgressBar, Container]
commonPatterns: [multiple-file-upload, batch-upload, document-batch]
---

Source: https://clickhouse.design/click-ui/filemultiupload

# 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

## Props

| Prop               | Type                       | Default value | Description                                                                                  |
| ------------------ | -------------------------- | ------------- | -------------------------------------------------------------------------------------------- |
| title              | `string`                   | `undefined`   | Title text displayed in the file multi-upload component                                      |
| files              | `Array<FileUploadItem>`    | `[]`          | Array of file objects, each with id, name, size, status, progress, and optional errorMessage |
| supportedFileTypes | `Array<string>`            | `[]`          | Array of allowed file extensions (e.g., \[".pdf", ".doc", ".docx"])                          |
| onFileSelect       | `(file: File) => void`     | `undefined`   | Callback function called when a file is selected. Receives the File object.                  |
| onFileRemove       | `(fileId: string) => void` | `undefined`   | Callback function called when a file is removed. Receives the file ID.                       |
| onFileRetry        | `(fileId: string) => void` | `undefined`   | Callback function called when retry is clicked for a failed file. Receives the file ID.      |
| onFileFailure      | `() => void`               | `undefined`   | Callback function called when any file upload fails                                          |

```tsx
import { FileMultiUpload } from '@clickhouse/click-ui'
import { useState } from 'react'

interface FileUploadItem {
id: string
name: string
size: number
status: 'uploading' | 'success' | 'error'
progress: number
errorMessage?: string
}

function MyFileMultiUpload() {
const [files, setFiles] = useState<FileUploadItem[]>([])
return (
  <FileMultiUpload
    title="Upload files"
    files={files}
    onFileSelect={(file) => {
      // Add file to list
    }}
    onFileRemove={(fileId) => {
      // Remove file from list
    }}
  />
)
}
```

### FileUploadItem Interface

| Prop         | Type                                  | Default value | Description                          |
| ------------ | ------------------------------------- | ------------- | ------------------------------------ |
| id           | `string`                              | `''`          | Unique identifier for the file       |
| name         | `string`                              | `''`          | Name of the file                     |
| size         | `number`                              | `''`          | Size of the file in bytes            |
| status       | `"uploading" \| "success" \| "error"` | `''`          | Current status of the file upload    |
| progress     | `number`                              | `0`           | Upload progress (0-100)              |
| errorMessage | `string`                              | `undefined`   | Error message when status is "error" |

```tsx
interface FileUploadItem {
id: string
name: string
size: number
status: 'uploading' | 'success' | 'error'
progress: number
errorMessage?: string
}
```

## Quick start

```tsx
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

```tsx
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))}
  />
)
}
```