Dropzone
Installation
Package depends on @mantine/core and @mantine/hooks.
Install with npm:
Install with yarn:
Usage
Dropzone lets you capture one or more files from user. Component is built with react-dropzone and support all of its core features:
- Accepts/rejects files based on provided mime types
- Limits individual file size
- Renders any content within dropzone with children function
Loading state
Set loading
prop to indicate loading state with LoadingOverlay component.
When loading
is set to 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 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:
Mime types
To specify specific file types provide 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 |
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 |
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 |
Get ref
FullScreenDropzone component
FullScreenDropzone lets you capture files dropped to browser window instead of specific area.
Component is built without react-dropzone (due to some bugs in mime types detections) but supports the same props
and features as Dropzone component shown above (except maxSize
, onReject
, openRef
and loading
props).
To preview component click button and drop images to browser window: