Forms

FileDropzone

A place to drop files, or to choose them: a real file input with its label, so a click, Enter or Space opens the picker. It checks the type and the size and says the limit when a file is over it. There is no upload code: hand the files to yours and pass their progress back in items, which it lists with a Progress, a check when done, or the error. The checks are there to help the person; check the type and the size again on your server.

view .md

Preview

Drop files here, or choose themPDF, CSV or an image, up to 5 MB

september-statement.pdf482 kB

Installation

terminal

bash

npx @entrepta/cli@latest add file-dropzone

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

file-dropzone.tsx

tsx

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

<FileDropzone
  accept="image/*,.pdf"
  maxSize={5_000_000}
  multiple
  hint="PNG, JPG or PDF, up to 5 MB"
  onFiles={(files) => files.forEach(upload)}
  items={uploads}                  // { id, name, size, progress?, error? }[]
  onRemove={cancel}
/>

Props

Prop	Type	Default	Description
onFiles	(files: File[]) => void	-	The files that pass
accept	string	-	As the input takes it: "image/*,.pdf"
maxSize	number	-	Bytes; a file over it says the limit
multiple	boolean	false	Several at once
items	{ id, name, size, progress?, error? }[]	-	progress from 0 to 1 while it uploads
onRemove	(id) => void	-	A × on each file
hint	ReactNode	-	The line under the title