@mshafiqyajid/react-file-upload
Headless file upload hook and styled component. Revamped dropzone UI with customisable labels, drag-and-drop, image previews, custom preview renderer, validation callbacks, multi-file.
Playground #
Drop files here
or
Props
TSX
import { FileUploadStyled } from "@mshafiqyajid/react-file-upload/styled";
import "@mshafiqyajid/react-file-upload/styles.css";
<FileUploadStyled />Install #
npm install @mshafiqyajid/react-file-uploadQuick start #
import { FileUploadStyled } from "@mshafiqyajid/react-file-upload/styled";
import "@mshafiqyajid/react-file-upload/styles.css";
<FileUploadStyled
multiple
accept="image/*"
maxSize={5242880}
showPreview
onFiles={(result) => console.log(result.files, result.errors)}
/>API #
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "dropzone" | "button" | "dropzone" | Upload widget style |
| multiple | boolean | false | Allow multiple files |
| accept | string | — | Accepted file types (MIME or extension) |
| maxSize | number | — | Max file size in bytes |
| maxFiles | number | — | Max number of files |
| showPreview | boolean | true | Show image previews |
| size | "sm" | "md" | "lg" | "md" | Component size |
| onFiles | (result) => void | — | Called when files change. result.files, result.errors |
| disabled | boolean | false | Disable interaction |
| uploadText | string | "Drop files here" | Main dropzone label |
| browseText | string | "browse" | Browse link text |
| renderPreview | (file, onRemove) => ReactNode | — | Custom preview renderer |
| onError | (errors: string[]) => void | — | Validation error callback |