OOratiq

File Uploader

Ready

Drag-and-drop upload zone.

Installation

$ npx @oratiq-js/ui add file-uploader

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

Usage

import
import { FileUploader } from "@/components/ui/file-uploader";

Behaviour

  • The drop zone is a real file-input label — keyboard and screen-reader users get the native picker; drag-and-drop is an enhancement, not the only path.
  • accept and maxSize are validated on drop too, not just in the picker; rejected files are listed with the reason rather than silently dropped.
  • Accepted files render as Attachment rows with remove buttons; onFilesChange only ever reports valid files.

Props

PropTypeDefaultDescription
acceptstring—e.g. "image/*,.pdf".
multiplebooleantrueAllow more than one file.
maxSizenumber—Per-file cap in bytes.
onFilesChange(files: File[]) => void—Valid files after every change.

Uploading is yours

This component collects and validates files — it deliberately does not upload. Wire the files to your own endpoint, and drive Attachment's progress state from your upload progress.

View source on GitHub → components/ui/file-uploader.tsx