Upload Dropzone
A dropzone that uploads multiple files.
Demo
Drag and drop files here
You can upload 4 files. Each up to 2MB. Accepted JPEG, PNG, GIF.
Installation
Usage
The <UploadDropzone />
should be used inside a client component.
If your upload route handler is not located at /api/upload
, modify the api
prop to match your path.
When clicked, the dropzone will open a file picker dialog. When selected or dropped, the files will be uploaded to the desired route.
Description
You can customize the description shown in the dropzone. You can pass a string, or an object with the following properties:
maxFiles
: The maximum number of files that can be uploaded.maxFileSize
: The maximum size of the files that can be uploaded, use a formatted string (e.g.10MB
).fileTypes
: The file types that can be uploaded.
Note that this is only cosmetic and does not enforce any restrictions client-side.
Props
Prop | Type | Default |
---|---|---|
api? | string | /api/upload |
route? | string | - |
sequential? | boolean | false |
accept? | string | undefined | - |
metadata? | Record<string, unknown> | undefined | - |
description? | string | object | undefined | - |
onBeforeUpload? | function | undefined | - |
onUploadBegin? | function | undefined | - |
onUploadProgress? | function | undefined | - |
onUploadComplete? | function | undefined | - |
onUploadError? | function | undefined | - |
onUploadSettled? | function | undefined | - |