Dropzone
Capture files from user with drag and drop
Source
Docs
Package
License
Installation
After installation import package styles at the root of your application:
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
Drag images here or click to select files
Attach as many files as you like, each file should not exceed 5mb
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):
Drag images here or click to select files
Attach as many files as you like, each file should not exceed 5mb
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:
Drag images here or click to select files
Attach as many files as you like, each file should not exceed 5mb
Open file browser manually
To open files browser from outside of component use openRef
prop to get function that will trigger file browser:
Drag images here or click to select files
Attach as many files as you like, each file should not exceed 5mb
Enable child pointer event
By default, Dropzone disables pointer events on its children for dragging events to work. When activateOnClick={false}
,
clicking on any children inside Dropzone will not do anything.
However, you can set style pointerEvents: 'all'
to make children clickable.
Note that you need to set these styles only on interactive elements, such as buttons or links.
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 |
heic | image/heic |
mp4 | video/mp4 |
zip | application/zip |
rar | application/x-rar |
7z | application/x-7z-compressed |
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, image/heic |
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
Drop images here
Images previews
Drop images here
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: