File dropzonePro

• Uploading attachments, imports, avatars and documents.

• A single small file in a dense form: a plain file input is enough.

Import it from @/components/ui/file-dropzone after installing.

import { FileDropzone } from "@/components/ui/file-dropzone";

export function Attachments() {
  return (
    <FileDropzone
      accept="image/*,.pdf"
      maxSize={5 * 1024 * 1024}
      upload={(file, onProgress) => uploadWithProgress("/api/upload", file, onProgress)}
    />
  );
}

• The drop area is a button described by the limits.
• Rejections are announced with role="alert".
• Each upload is a labelled progressbar; remove buttons name the file.

• The cloud bobs and the area glows while dragging over.
• Files slide in, progress springs, a check pops on success, removed rows slide out.

• Up to 448px; long names truncate.

• Validation happens before any upload starts.

• Validate on the server too; accept is only a hint to browsers.