---
title: File upload
description: File Upload allows users to select and upload files with drag-and-drop support, progress tracking, and error handling.
category: Forms
related: [FileMultiUpload, ProgressBar, Button]
commonPatterns: [single-file-upload, document-upload, image-upload]
---

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

# File upload

File Upload provides a drag-and-drop interface for selecting and uploading files. It supports progress tracking, success states, error handling, and file type validation. Perfect for single file uploads with visual feedback.

## Example

## Props

| Prop               | Type                   | Default value | Description                                                                 |
| ------------------ | ---------------------- | ------------- | --------------------------------------------------------------------------- |
| title              | `string`               | `undefined`   | Title text displayed in the file upload component                           |
| size               | `"sm" \| "md"`         | `"md"`        | Size variant of the file upload component                                   |
| supportedFileTypes | `Array<string>`        | `[]`          | Array of allowed file extensions (e.g., \[".pdf", ".doc", ".docx"])         |
| progress           | `number`               | `0`           | Upload progress value from 0 to 100                                         |
| showProgress       | `boolean`              | `false`       | Whether to display the progress bar                                         |
| showSuccess        | `boolean`              | `false`       | Whether to display the success state after upload completes                 |
| failureMessage     | `string`               | `undefined`   | Error message to display when upload fails                                  |
| onFileSelect       | `(file: File) => void` | `undefined`   | Callback function called when a file is selected. Receives the File object. |
| onFileFailure      | `() => void`           | `undefined`   | Callback function called when file upload fails                             |
| onFileClose        | `() => void`           | `undefined`   | Callback function called when the file is removed/closed                    |
| onRetry            | `() => void`           | `undefined`   | Callback function called when the retry button is clicked                   |

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

function MyFileUpload() {
const [progress, setProgress] = useState(0)
return (
  <FileUpload
    title="Upload file"
    supportedFileTypes={['.pdf', '.doc', '.docx']}
    progress={progress}
    showProgress={true}
    onFileSelect={(file) => {
      console.log('File selected:', file)
      // Handle file upload
    }}
  />
)
}
```

## Quick start

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

function MyFileUpload() {
const [progress, setProgress] = useState(0)
const [showProgress, setShowProgress] = useState(false)

return (
  <FileUpload
    title="Upload file"
    supportedFileTypes={['.pdf', '.doc', '.docx']}
    progress={progress}
    showProgress={showProgress}
    onFileSelect={(file) => {
      setShowProgress(true)
      // Handle file upload
    }}
  />
)
}
```

## Related components

- **FileMultiUpload**: For uploading multiple files simultaneously.
- **ProgressBar**: Used internally for upload progress.
- **Button**: Often used alongside file uploads for form submission.

## Common use cases

### Single file upload

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

function SingleFileUpload() {
const [progress, setProgress] = useState(0)
const [showProgress, setShowProgress] = useState(false)

return (
  <FileUpload
    title="Upload document"
    supportedFileTypes={['.pdf', '.doc', '.docx']}
    progress={progress}
    showProgress={showProgress}
    onFileSelect={(file) => {
      setShowProgress(true)
      // Handle upload
    }}
  />
)
}
```

### With progress

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

function ProgressFileUpload() {
const [progress, setProgress] = useState(0)
return (
  <FileUpload
    title="Uploading..."
    progress={progress}
    showProgress={true}
    onFileSelect={() => {
      // Start upload and update progress
    }}
  />
)
}
```

### With success state

```tsx
import { FileUpload } from '@clickhouse/click-ui'

function SuccessFileUpload() {
return (
  <FileUpload
    title="Upload complete"
    showSuccess={true}
    onFileClose={() => {}}
  />
)
}
```