Capture files from user with drag and drop
After installation import package styles at the root of your application:
Dropzone lets you capture one or more files from the user. The component is based on react-dropzone and supports all of its core features:
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 components are visible only when the user performs a certain action:
Set the loading prop to indicate a loading state with the LoadingOverlay component. When the loading prop is true, users cannot drop or select new files ( Dropzone becomes disabled):
If you want to implement your own loading state, you can disable Dropzone without LoadingOverlay . Same as with loading , when Dropzone is disabled, users cannot drop or select new files:
To open the file browser from outside of the component, use the openRef prop to get a function that will trigger the file browser:
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 the style pointerEvents: 'all' to make children clickable. Note that you need to set these styles only on interactive elements, such as buttons or links.
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 the accept prop:
To save some research time, you can use the MIME_TYPES variable exported from @mantine/dropzone :
MIME_TYPES includes the following data:
Additionally, you can use grouped mime types:
Dropzone root element has the following data attributes to change styles based on current status:
Dropzone.FullScreen lets you capture files dropped to the browser window instead of a specific area. It supports the same props as the Dropzone component.
To preview the component, click the button and drop images to the browser window: