dropzone.mdx

group	package	title	order	slug	description	componentPrefix	props	import	source	docs	installation	license	styles
Other packages	@mantine/dropzone	Dropzone	1	/others/dropzone/	Capture files from user with drag and drop	Dropzone	Dropzone DropzoneFullScreen	import { Dropzone } from '@mantine/dropzone';	mantine-dropzone/src	others/dropzone.mdx	@mantine/dropzone	MIT	Dropzone DropzoneFullScreen

import { MIME_TYPES, IMAGE_MIME_TYPE, PDF_MIME_TYPE, MS_WORD_MIME_TYPE, MS_EXCEL_MIME_TYPE, MS_POWERPOINT_MIME_TYPE, } from '@mantine/dropzone'; import { DropzoneDemos } from '@mantine/demos';

Installation

Package depends on @mantine/core and @mantine/hooks.

Install with yarn:

yarn add @mantine/dropzone

Install with npm:

npm install @mantine/dropzone

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 dropzone
• Dropzone.Reject is visible only when the user drags file that cannot be accepted over the dropzone
• Dropzone.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.

import { Dropzone } from '@mantine/dropzone';

function Demo() {
  return (
    <Dropzone
      accept={{
        'image/*': [], // All images
        'text/html': ['.html', '.htm'],
      }}
    >
      {/* children */}
    </Dropzone>
  );
}

You can also specify file types by providing an array of mime types to accept prop:

import { Dropzone } from '@mantine/dropzone';

function Demo() {
  return (
    <Dropzone accept={['image/png', 'image/jpeg', 'image/sgv+xml', 'image/gif']}>
      {/* children */}
    </Dropzone>
  );
}

To save some research time you can use MIME_TYPES variable exported from @mantine/dropzone:

import { Dropzone, MIME_TYPES } from '@mantine/dropzone';

function Demo() {
  return (
    <Dropzone accept={[MIME_TYPES.png, MIME_TYPES.jpeg, MIME_TYPES.svg, MIME_TYPES.gif]}>
      {/* children */}
    </Dropzone>
  );
}

MIME_TYPES includes following data:

<DataTable head={['Key', 'Mime type']} data={Object.keys(MIME_TYPES).map((key) => [key, MIME_TYPES[key]])} />

Additionally you can use grouped mime types:

<DataTable head={['Variable', 'Mime types']} data={[ ['IMAGE_MIME_TYPE', IMAGE_MIME_TYPE.join(', ')], ['PDF_MIME_TYPE', PDF_MIME_TYPE.join(', ')], ['MS_WORD_MIME_TYPE', MS_WORD_MIME_TYPE.join(', ')], ['MS_EXCEL_MIME_TYPE', MS_EXCEL_MIME_TYPE.join(', ')], ['MS_POWERPOINT_MIME_TYPE', MS_POWERPOINT_MIME_TYPE.join(', ')], ]} />

import { IMAGE_MIME_TYPE, Dropzone } from '@mantine/dropzone';

function Demo() {
  return <Dropzone accept={IMAGE_MIME_TYPE}>{/* children */}</Dropzone>;
}

Styles API

Dropzone root element has the following data attributes to change styles based on current status:

• data-loading – when loading prop is true
• data-accept – when user drags files that can be accepted over the dropzone
• data-reject – when user drags files that cannot be accepted over the dropzone
• data-idle – default state – user does not drag any files over dropzone

Images previews

Get ref

import { useRef, useEffect } from 'react';
import { Dropzone } from '@mantine/dropzone';

function Demo() {
  const dropzoneRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    dropzoneRef.current.focus();
  }, []);

  return <Dropzone ref={dropzoneRef}>{/* children */}</Dropzone>;
}

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: