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

Upload File

Files supported: .pdf, .doc, .docx

Props

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

Quick Start

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

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

Upload Document

Files supported: .pdf, .doc, .docx

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

Uploading...

Files supported: .txt, .sql

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

Upload Complete