File Uploader

Drag-and-drop file upload component with progress bars, file type validation, and direct S3/R2 integration. Supports multi-file uploads and image previews.

ReactUI ComponentsBuilt with Copilot

1.4k

Stars

7.2k

Installs

Deps

Comments

Install / Copy

npx create-freestack-module file-uploader

Code Preview

index.tsx

import { useDropzone } from "react-dropzone";

export function FileUploader({ onUpload, maxSize = 10_000_000 }) {
  const [files, setFiles] = useState([]);
  const [progress, setProgress] = useState({});

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop: (accepted) => {
      setFiles((prev) => [...prev, ...accepted]);
      accepted.forEach((file) => uploadFile(file, setProgress));
    },
    maxSize,
    accept: { "image/*": [], "application/pdf": [] },
  });

  return (
    <div {...getRootProps()} className="cursor-pointer rounded-lg border-2 border-dashed p-8 text-center">
      <input {...getInputProps()} />
      {isDragActive ? <p>Drop files here...</p> : <p>Drag files or click to upload</p>}
      <FileList files={files} progress={progress} />
    </div>
  );
}