File Upload

A feature-rich file upload component that supports drag and drop, file previews, validation, progress tracking, and multiple file selection. Built with accessibility and user experience in mind.

Installation

pnpm add @helgadigitals/vera-ui

npm install @helgadigitals/vera-ui

yarn add @helgadigitals/vera-ui

Usage

Upload your files

Select files or drag and drop here

or drag and drop files here

Max 10MB

import { useState } from "react"
import { FileUpload } from "@helgadigitals/vera-ui"

export default function Example() {
const [files, setFiles] = useState(null)

return (
  <FileUpload
    value={files}
    onChange={setFiles}
    label="Upload your files"
    helperText="Select files or drag and drop here"
  />
)
}

import { useState } from "react"import { FileUpload } from "@helgadigitals/vera-ui"export default function Example() {const [files, setFiles] = useState(null)return (  <FileUpload    value={files}    onChange={setFiles}    label="Upload your files"    helperText="Select files or drag and drop here"  />)}

Examples

Basic File Upload

Choose a file

Select any file to upload

or drag and drop files here

Max 10MB

import { useState } from "react"
import { FileUpload } from "@helgadigitals/vera-ui"

export default function BasicExample() {
const [file, setFile] = useState(null)

return (
  <div className="space-y-4">
    <FileUpload
      value={file}
      onChange={setFile}
      label="Choose a file"
      helperText="Select any file to upload"
    />
    
    {file && (
      <p className="text-sm text-muted-foreground">
        Selected: {file.name} ({(file.size / 1024 / 1024).toFixed(2)} MB)
      </p>
    )}
  </div>
)
}

import { useState } from "react"import { FileUpload } from "@helgadigitals/vera-ui"export default function BasicExample() {const [file, setFile] = useState(null)return (  <div className="space-y-4">    <FileUpload      value={file}      onChange={setFile}      label="Choose a file"      helperText="Select any file to upload"    />        {file && (      <p className="text-sm text-muted-foreground">        Selected: {file.name} ({(file.size / 1024 / 1024).toFixed(2)} MB)      </p>    )}  </div>)}

Multiple File Upload

Choose multiple files

Select up to 5 files

or drag and drop files here

Max 10MBMax 5 files

import { useState } from "react"
import { FileUpload } from "@helgadigitals/vera-ui"

export default function MultipleExample() {
const [files, setFiles] = useState([])

return (
  <div className="space-y-4">
    <FileUpload
      value={files}
      onChange={setFiles}
      multiple={true}
      maxFiles={5}
      label="Choose multiple files"
      helperText="Select up to 5 files"
    />
    
    {files && files.length > 0 && (
      <div>
        <p className="text-sm font-medium mb-2">
          {files.length} file(s) selected:
        </p>
        <ul className="text-sm text-muted-foreground space-y-1">
          {files.map((file, index) => (
            <li key={index}>• {file.name}</li>
          ))}
        </ul>
      </div>
    )}
  </div>
)
}

import { useState } from "react"import { FileUpload } from "@helgadigitals/vera-ui"export default function MultipleExample() {const [files, setFiles] = useState([])return (  <div className="space-y-4">    <FileUpload      value={files}      onChange={setFiles}      multiple={true}      maxFiles={5}      label="Choose multiple files"      helperText="Select up to 5 files"    />        {files && files.length > 0 && (      <div>        <p className="text-sm font-medium mb-2">          {files.length} file(s) selected:        </p>        <ul className="text-sm text-muted-foreground space-y-1">          {files.map((file, index) => (            <li key={index}>• {file.name}</li>          ))}        </ul>      </div>    )}  </div>)}

Image Upload with Preview

Upload images

PNG, JPG, GIF up to 5MB each

or drag and drop files here

Max 5MBMax 3 filesAccepts: image/*

import { useState } from "react"
import { FileUpload } from "@helgadigitals/vera-ui"

export default function ImageExample() {
const [images, setImages] = useState([])

return (
  <FileUpload
    value={images}
    onChange={setImages}
    accept="image/*"
    multiple={true}
    maxFiles={3}
    maxSize={5}
    showPreview={true}
    label="Upload images"
    helperText="PNG, JPG, GIF up to 5MB each"
  />
)
}

import { useState } from "react"import { FileUpload } from "@helgadigitals/vera-ui"export default function ImageExample() {const [images, setImages] = useState([])return (  <FileUpload    value={images}    onChange={setImages}    accept="image/*"    multiple={true}    maxFiles={3}    maxSize={5}    showPreview={true}    label="Upload images"    helperText="PNG, JPG, GIF up to 5MB each"  />)}

File Type Restrictions

Upload document

PDF, DOC, or DOCX files only

or drag and drop files here

Max 10MBAccepts: .pdf,.doc,.docx

import { useState } from "react"
import { FileUpload } from "@helgadigitals/vera-ui"

export default function RestrictedExample() {
const [document, setDocument] = useState(null)
const [error, setError] = useState("")

return (
  <FileUpload
    value={document}
    onChange={setDocument}
    accept=".pdf,.doc,.docx"
    allowedTypes={[
      "application/pdf",
      "application/msword",
      "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
    ]}
    maxSize={10}
    label="Upload document"
    helperText="PDF, DOC, or DOCX files only"
    error={error}
    onError={setError}
  />
)
}

import { useState } from "react"import { FileUpload } from "@helgadigitals/vera-ui"export default function RestrictedExample() {const [document, setDocument] = useState(null)const [error, setError] = useState("")return (  <FileUpload    value={document}    onChange={setDocument}    accept=".pdf,.doc,.docx"    allowedTypes={[      "application/pdf",      "application/msword",      "application/vnd.openxmlformats-officedocument.wordprocessingml.document"    ]}    maxSize={10}    label="Upload document"    helperText="PDF, DOC, or DOCX files only"    error={error}    onError={setError}  />)}

Disabled State

Upload disabled

This upload area is currently disabled

or drag and drop files here

Max 10MB

import { FileUpload } from "@helgadigitals/vera-ui"

export default function DisabledExample() {
return (
  <FileUpload
    value={null}
    onChange={() => {}}
    disabled={true}
    label="Upload disabled"
    helperText="This upload area is currently disabled"
  />
)
}

import { FileUpload } from "@helgadigitals/vera-ui"export default function DisabledExample() {return (  <FileUpload    value={null}    onChange={() => {}}    disabled={true}    label="Upload disabled"    helperText="This upload area is currently disabled"  />)}

API Reference

Props

Prop

Type

File Validation

The component automatically validates files based on:

File size: Checked against maxSize prop
File count: Checked against maxFiles prop (when multiple)
File types: Checked against allowedTypes array

When validation fails, the onError callback is triggered with a descriptive message.

Features

Drag and Drop

Full drag and drop support for modern browsers
Visual feedback during drag operations
Automatic file validation on drop

File Previews

Image thumbnails for supported formats
File type icons for non-image files
File size and type information

Validation

File size limits
File type restrictions
Maximum file count limits
Custom error handling

Progress Tracking

Upload progress bar support
Loading states and feedback
Progress percentage display

Accessibility

Full keyboard navigation support
Screen reader friendly
Proper ARIA labels and descriptions
Focus management

Styling

The FileUpload component supports custom styling through the className prop and automatically adapts to your theme:

<FileUpload
  className="border-2 border-dashed border-blue-300"
  // ... other props
/>

File Type Support

The component automatically detects and displays appropriate icons for:

Images: PNG, JPG, GIF, WebP, etc.
Videos: MP4, WebM, AVI, etc.
Audio: MP3, WAV, OGG, etc.
Documents: PDF, DOC, DOCX, TXT, etc.
Archives: ZIP, RAR, 7Z, etc.
Other: Generic file icon for unknown types

Image Previews: When showPreview is enabled, image files will display thumbnails instead of generic icons, making it easier for users to identify their uploaded images.

Browser Support

Modern browsers with File API support
Drag and drop on browsers that support it
Graceful fallback to click-to-upload on older browsers

File Upload

On this page