Dropzone

Capture files from user with drag and drop

Import

Source

View source code

Docs

Edit this page

Package

@mantine/dropzone

License

MIT

Installation

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

Install with npm:

npm install @mantine/dropzone @mantine/core @mantine/hooks

Install with yarn:

yarn add @mantine/dropzone @mantine/core @mantine/hooks

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

Drag images here or click to select files

Attach as many files as you like, each file should not exceed 5mb

import { Group, Text, useMantineTheme } from '@mantine/core';
import { ImageIcon, UploadIcon, CrossCircledIcon } from '@modulz/radix-icons';

function ImageUploadIcon({ status, ...props }) {
  if (status.accepted) {
    return <UploadIcon {...props} />;
  }

  if (status.rejected) {
    return <CrossCircledIcon {...props} />;
  }

  return <ImageIcon {...props} />;
}

function getIconColor(status, theme) {
  return status.accepted
    ? theme.colors[theme.primaryColor][6]
    : status.rejected
    ? theme.colors.red[6]
    : theme.colorScheme === 'dark'
    ? theme.colors.dark[0]
    : theme.black;
}

function Demo() {
  const theme = useMantineTheme();

  return (
    // See results in console after dropping files to Dropzone
    <Dropzone
      onDrop={(files) => console.log('accepted files', files)}
      onReject={(files) => console.log('rejected files', files)}
      maxSize={3 * 1024 ** 2}
      accept={IMAGE_MIME_TYPE}
    >
      {(status) => (
        <Group position="center" spacing="xl" style={{ minHeight: 220, pointerEvents: 'none' }}>
          <ImageUploadIcon
            status={status}
            style={{ width: 80, height: 80, color: getIconColor(status, theme) }}
          />

          <div>
            <Text size="xl" inline>
              Drag images here or click to select files
            </Text>
            <Text size="sm" color="dimmed" inline mt={7}>
              Attach as many files as you like, each file should not exceed 5mb
            </Text>
          </div>
        </Group>
      )}
    </Dropzone>
  );
}

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

Drag images here or click to select files

Attach as many files as you like, each file should not exceed 5mb

<Dropzone loading>
  {/* children */}
</Dropzone>

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:

Drag images here or click to select files

Attach as many files as you like, each file should not exceed 5mb

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

// Add your own disabled styles
const useStyles = createStyles((theme) => ({
  disabled: {
    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
    borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2],
    cursor: 'not-allowed',

    '& *': {
      color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],
    },
  },
}));

function Demo() {
  const { classes } = useStyles();

  return (
    <Dropzone disabled className={classes.disabled}>
      {/* children, see previous demo */}
    </Dropzone>
  );
}

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

import { useRef } from 'react';
import { Button, Group } from '@mantine/core';
import { Dropzone } from '@mantine/dropzone';

function Demo() {
  const openRef = useRef();
  return (
    <>
      <Dropzone openRef={openRef}>
        {/* children */}
      </Dropzone>

      <Group position="center" mt="md">
        <Button onClick={() => openRef.current()}>Select files</Button>
      </Group>
    </>
  );
}

Mime types

To specify specific file types provide an array of mime types to accept prop:

<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';

// Same as an example above
<Dropzone accept={[MIME_TYPES.png, MIME_TYPES.jpeg, MIME_TYPES.svg, MIME_TYPES.gif]}>
  {/* children */}
</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
pdf	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

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

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

// Same as an example above
<Dropzone accept={IMAGE_MIME_TYPE}>{/* children */}</Dropzone>;

Get ref

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

function Demo() {
  const dropzoneRef = useRef(); // will contain div element

  useEffect(() => {
    // do anything with ref
    dropzoneRef.current.focus();
  }, []);

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

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, and loading props).

To preview component click button and drop images to browser window:

import { useState } from 'react';
import { Button } from '@mantine/core';
import { FullScreenDropzone, IMAGE_MIME_TYPE } from '@mantine/dropzone';

function Demo() {
  const [disabled, setDisabled] = useState(true);

  return (
    <>
      <Button color={disabled ? 'blue' : 'red'} onClick={() => setDisabled((d) => !d)}>
        {disabled ? 'Enable' : 'Disable'} full screen dropzone
      </Button>

      <FullScreenDropzone
        disabled={disabled}
        accept={IMAGE_MIME_TYPE}
        onDrop={(files) => {
          console.log(files);
          setDisabled(true);
        }}
      >
        {/* See dropzone children in previous demo */}
      </FullScreenDropzone>
    </>
  );
}

Go back

TimeRangeInput – @mantine/dates

Up next

Modals manager – @mantine/modals

Build fully functional accessible web applications faster than ever

Project

Contribute to Mantine Media assets Changelog Releases

Community

Join Discord community Follow on Twitter Email newsletter GitHub discussions

Feedback

Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good

Leave feedback

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter