File Upload Zone - Saturation UI

Installation

pnpm dlx shadcn@latest add https://ui.saturation.io/r/file-upload-zone.json

Usage

import { FileUploadZone } from "@/components/ui/file-upload-zone"

<FileUploadZone
  files={uploadedFiles}
  onFilesDrop={(files) => handleFiles(files)}
  onRemoveFile={(id) => removeFile(id)}
/>

API Reference

FileUploadZone

Prop	Type	Default	Description
`files`	`UploadedFile[]`	`[]`	Array of uploaded file objects with progress and status.
`onFilesDrop`	`(files: File[]) => void`	—	Callback when files are dropped or selected.
`onRemoveFile`	`(fileId: string) => void`	—	Callback when a file is removed.
`showDropZone`	`boolean`	`true`	Whether to show the drop zone area.
`className`	`string`	—	Additional CSS classes.

UploadedFile

interface UploadedFile {
  id: string
  name: string
  progress: number
  status: "uploading" | "scanning" | "matched" | "unmatched" | "error"
  matchedWith?: string
}

Drop files here

Invoices and receipts accepted

invoice-march.pdfMatched

Matched with Transaction #4521

receipt-042.pngUploading

statement-q1.pdfScanning

Installation

pnpm dlx shadcn@latest add https://ui.saturation.io/r/file-upload-zone.json

Usage

import { FileUploadZone } from "@/components/ui/file-upload-zone"

<FileUploadZone
  files={uploadedFiles}
  onFilesDrop={(files) => handleFiles(files)}
  onRemoveFile={(id) => removeFile(id)}
/>

API Reference

FileUploadZone

Prop	Type	Default	Description
`files`	`UploadedFile[]`	`[]`	Array of uploaded file objects with progress and status.
`onFilesDrop`	`(files: File[]) => void`	—	Callback when files are dropped or selected.
`onRemoveFile`	`(fileId: string) => void`	—	Callback when a file is removed.
`showDropZone`	`boolean`	`true`	Whether to show the drop zone area.
`className`	`string`	—	Additional CSS classes.

UploadedFile

interface UploadedFile {
  id: string
  name: string
  progress: number
  status: "uploading" | "scanning" | "matched" | "unmatched" | "error"
  matchedWith?: string
}