Dropzone

import { IMAGE_MIME_TYPE, MIME_TYPES, MS_EXCEL_MIME_TYPE, MS_POWERPOINT_MIME_TYPE, MS_WORD_MIME_TYPE, PDF_MIME_TYPE, } from '@mantine/dropzone'; import { DropzoneDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Dropzone);

Installation

After installation import package styles at the root of your application:

import '@mantine/core/styles.css';
// ‼️ import dropzone styles after core package styles
import '@mantine/dropzone/styles.css';

Usage

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:

• Accepts/rejects files based on provided mime types
• Limits individual file size
• Renders given children and provides context-based components 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 a certain action:

• Dropzone.Accept is visible only when the user drags a file that can be accepted over the dropzone
• Dropzone.Reject is visible only when the user drags a file that cannot be accepted over the dropzone
• Dropzone.Idle is visible when the user does not drag anything over the dropzone

Loading state

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):

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, users cannot drop or select new files:

Open file browser manually

To open the file browser from outside of the component, use the openRef prop to get a function that will trigger the file browser:

Enable child pointer events

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.

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'],
      }}
      onDrop={() => {}}
    >
    </Dropzone>
  );
}

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

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

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

To save some research time, you can use the 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,
      ]}
      onDrop={() => {}}
    >
    </Dropzone>
  );
}

MIME_TYPES includes the 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 { Dropzone, IMAGE_MIME_TYPE } from '@mantine/dropzone';

function Demo() {
  return (
    <Dropzone accept={IMAGE_MIME_TYPE} onDrop={() => {}}>
    </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 – the user does not drag any files over the dropzone

Images previews

Get ref

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

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

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

  return (
    <Dropzone ref={dropzoneRef} onDrop={() => {}}>
    </Dropzone>
  );
}

Dropzone.FullScreen component

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: