Dropzone
Installation
Package depends on @mantine/core
and @mantine/hooks
.
Install with yarn:
Install with npm:
Usage
Dropzone
lets you capture one or more files from user.
Component is based on react-dropzone and support all of its core features:
- Accepts/rejects files based on provided mime types
- Limits individual file size
- Renders given children and provides context based component to display elements based on current status
Dropzone.Accept, Dropzone.Reject and Dropzone.Idle
Dropzone.Accept
, Dropzone.Reject
and Dropzone.Idle
components are visible only when the user performs certain action:
Dropzone.Accept
is visible only when the user drags file that can be accepted over the dropzoneDropzone.Reject
is visible only when the user drags file that cannot be accepted over the dropzoneDropzone.Idle
is visible when the user does not drag anything over dropzone
Loading state
Set loading
prop to indicate loading state with LoadingOverlay component.
When loading
props is true user cannot drop or select new files (Dropzone
becomes disabled):
Disabled state
If you want to implement your own loading state you can disable Dropzone
without LoadingOverlay
.
Same as with loading
, when Dropzone
is disabled user cannot drop or select new files:
Open file browser manually
To open files browser from outside of component use openRef
prop to get function that will trigger file browser:
Enable child pointer event
By default, Dropzone disables pointer events on its children for dragging events to work. So when we set activateOnClick
to false
,
clicking on any children inside Dropzone will do nothing. However, You can set style pointerEvents: 'all'
to make children events to work:
Mime types
To specify file types provide an object with the keys set to the mime type and the values as an array of file extensions. Find more examples of accepting specific file types in the react-dropzone documentation.
You can also specify file types by providing an array of mime types to accept
prop:
To save some research time you can use MIME_TYPES
variable exported from @mantine/dropzone
:
MIME_TYPES
includes following data:
Key | Mime type |
---|---|
png | image/png |
gif | image/gif |
jpeg | image/jpeg |
svg | image/svg+xml |
webp | image/webp |
avif | image/avif |
mp4 | video/mp4 |
zip | application/zip |
csv | text/csv |
application/pdf | |
doc | application/msword |
docx | application/vnd.openxmlformats-officedocument.wordprocessingml.document |
xls | application/vnd.ms-excel |
xlsx | application/vnd.openxmlformats-officedocument.spreadsheetml.sheet |
ppt | application/vnd.ms-powerpoint |
pptx | application/vnd.openxmlformats-officedocument.presentationml.presentation |
exe | application/vnd.microsoft.portable-executable |
Additionally you can use grouped mime types:
Variable | Mime types |
---|---|
IMAGE_MIME_TYPE | image/png, image/gif, image/jpeg, image/svg+xml, image/webp, image/avif |
PDF_MIME_TYPE | application/pdf |
MS_WORD_MIME_TYPE | application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document |
MS_EXCEL_MIME_TYPE | application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet |
MS_POWERPOINT_MIME_TYPE | application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.presentation |
Styles API
Dropzone
root element has the following data attributes to change styles based on current status:
data-loading
– whenloading
prop istrue
data-accept
– when user drags files that can be accepted over the dropzonedata-reject
– when user drags files that cannot be accepted over the dropzonedata-idle
– default state – user does not drag any files over dropzone
Images previews
Get ref
Dropzone.FullScreen component
Dropzone.FullScreen
lets you capture files dropped to browser window instead of specific area.
It supports the same props as Dropzone
component.
To preview component click button and drop images to browser window:
Dropzone component props
Name | Type | Description |
---|---|---|
accept | string[] | Accept | File types to accept |
activateOnClick | boolean | If false, disables click to open the native file selection dialog |
activateOnDrag | boolean | If false, disables drag 'n' drop |
activateOnKeyboard | boolean | If false, disables Space/Enter to open the native file selection dialog. Note that it also stops tracking the focus state. |
autoFocus | boolean | Set to true to autofocus the root element |
children * | ReactNode | Dropzone statues |
disabled | boolean | Disable files capturing |
dragEventsBubbling | boolean | If false, stops drag event propagation to parents |
getFilesFromEvent | (event: DropEvent) => Promise<(File | DataTransferItem)[]> | Use this to provide a custom file aggregator |
loading | boolean | Display loading overlay over dropzone |
maxFiles | number | Number of files that user can pick |
maxSize | number | Set maximum file size in bytes |
multiple | boolean | Allow selection of multiple files |
name | string | Name of the form control. Submitted with the form as part of a name/value pair. |
onDragEnter | (event: DragEvent<HTMLElement>) => void | Called when the `dragenter` event occurs |
onDragLeave | (event: DragEvent<HTMLElement>) => void | Called when the `dragleave` event occurs |
onDragOver | (event: DragEvent<HTMLElement>) => void | Called when the `dragover` event occurs |
onDrop * | (files: FileWithPath[]) => void | Called when valid files are dropped into dropzone |
onDropAny | (files: FileWithPath[], fileRejections: FileRejection[]) => void | Called when any files are dropped into dropzone |
onFileDialogCancel | () => void | Called when user closes the file selection dialog with no selection |
onFileDialogOpen | () => void | Called when user opens the file selection dialog |
onReject | (fileRejections: FileRejection[]) => void | Called when selected files don't meet file restrictions |
openRef | ForwardedRef<() => void> | Get open function as ref |
padding | number | "xs" | "sm" | "md" | "lg" | "xl" | Padding from theme.spacing, or number to set padding in px |
preventDropOnDocument | boolean | If false, allow dropped items to take over the current browser window |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | Border radius from theme.radius or number to set border-radius in px |
useFsAccessApi | boolean | Set to true to use the File System Access API to open the file picker instead of using an <input type="file"> click event, defaults to true |
validator | <T extends File>(file: T) => FileError | FileError[] | Custom validation function. It must return null if there's no errors. |
Dropzone.FullScreen component props
Name | Type | Description |
---|---|---|
accept | string[] | Accept | File types to accept |
activateOnClick | boolean | If false, disables click to open the native file selection dialog |
activateOnDrag | boolean | If false, disables drag 'n' drop |
activateOnKeyboard | boolean | If false, disables Space/Enter to open the native file selection dialog. Note that it also stops tracking the focus state. |
active | boolean | Determines whether user can drop files to browser window, true by default |
autoFocus | boolean | Set to true to autofocus the root element |
children * | ReactNode | Dropzone statues |
disabled | boolean | Disable files capturing |
dragEventsBubbling | boolean | If false, stops drag event propagation to parents |
getFilesFromEvent | (event: DropEvent) => Promise<(File | DataTransferItem)[]> | Use this to provide a custom file aggregator |
loading | boolean | Display loading overlay over dropzone |
maxFiles | number | Number of files that user can pick |
maxSize | number | Set maximum file size in bytes |
multiple | boolean | Allow selection of multiple files |
name | string | Name of the form control. Submitted with the form as part of a name/value pair. |
onDragEnter | (event: DragEvent<HTMLElement>) => void | Called when the `dragenter` event occurs |
onDragLeave | (event: DragEvent<HTMLElement>) => void | Called when the `dragleave` event occurs |
onDragOver | (event: DragEvent<HTMLElement>) => void | Called when the `dragover` event occurs |
onDrop * | (files: FileWithPath[]) => void | Called when valid files are dropped into dropzone |
onDropAny | (files: FileWithPath[], fileRejections: FileRejection[]) => void | Called when any files are dropped into dropzone |
onFileDialogCancel | () => void | Called when user closes the file selection dialog with no selection |
onFileDialogOpen | () => void | Called when user opens the file selection dialog |
onReject | (fileRejections: FileRejection[]) => void | Called when selected files don't meet file restrictions |
openRef | ForwardedRef<() => void> | Get open function as ref |
padding | number | "xs" | "sm" | "md" | "lg" | "xl" | Padding from theme.spacing, or number to set padding in px |
preventDropOnDocument | boolean | If false, allow dropped items to take over the current browser window |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | Border radius from theme.radius or number to set border-radius in px |
useFsAccessApi | boolean | Set to true to use the File System Access API to open the file picker instead of using an <input type="file"> click event, defaults to true |
validator | <T extends File>(file: T) => FileError | FileError[] | Custom validation function. It must return null if there's no errors. |
withinPortal | boolean | Determines whether component should be rendered within Portal, true by default |
zIndex | ZIndex | z-index value, 9999 by default |
Dropzone component Styles API
Name | Static selector | Description |
---|---|---|
root | .mantine-Dropzone-root | Root element |
inner | .mantine-Dropzone-inner | Inner element containing dropzone children |
DropzoneFullScreen component Styles API
Name | Static selector | Description |
---|---|---|
root | .mantine-DropzoneFullScreen-root | Root element |
inner | .mantine-DropzoneFullScreen-inner | Inner element containing dropzone children |
wrapper | .mantine-DropzoneFullScreen-wrapper | Wrapper around dropzone |