File Upload

Forms

About

A controlled drag-and-drop file picker with an always-visible browse button, a selected-files list showing size, and per-file removal.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds File Upload to your project and fits it to your theme.

Code

How File Upload is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import { FileUpload } from "@/components/ui/file-upload";

export default function FileUploadDemo() {
  const [files, setFiles] = React.useState<File[]>([]);

  return (
    <div className="flex w-full max-w-md flex-col gap-4 p-6">
      <FileUpload
        label="Attachments"
        files={files}
        onFilesChange={setFiles}
        multiple
        maxSizeBytes={5 * 1024 * 1024}
      />
    </div>
  );
}