@mantine/dropzone

What is @mantine/dropzone?

@mantine/dropzone is a React component library that provides a customizable and easy-to-use file dropzone for uploading files. It is part of the Mantine UI library, which offers a wide range of components for building modern web applications. The dropzone component allows users to drag and drop files or click to select files for upload, with support for file type restrictions, previews, and more.

What are @mantine/dropzone's main functionalities?

Basic File Dropzone

This feature allows you to create a basic file dropzone where users can drag and drop files or click to select files. The `onDrop` callback is triggered with the selected files.

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

function Demo() {
  return (
    <Dropzone onDrop={(files) => console.log(files)}>
      {(status) => <div>Drop files here</div>}
    </Dropzone>
  );
}

File Type Restrictions

This feature allows you to restrict the types of files that can be uploaded. In this example, only PNG and JPEG images are accepted.

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

function Demo() {
  return (
    <Dropzone onDrop={(files) => console.log(files)} accept={['image/png', 'image/jpeg']}>
      {(status) => <div>Drop images here</div>}
    </Dropzone>
  );
}

File Previews

This feature provides a way to display previews of the uploaded files. The example shows how to render image previews for the accepted files.

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

function Demo() {
  return (
    <Dropzone onDrop={(files) => console.log(files)}>
      {(status) => (
        <div>
          {status.acceptedFiles.map((file) => (
            <img key={file.name} src={URL.createObjectURL(file)} alt={file.name} width={100} />
          ))}
        </div>
      )}
    </Dropzone>
  );
}

Other packages similar to @mantine/dropzone

react-dropzone

react-dropzone is a popular library for creating file dropzones in React applications. It offers a similar drag-and-drop interface for file uploads, with support for file type restrictions and previews. Compared to @mantine/dropzone, react-dropzone is more widely used and has a larger community, but @mantine/dropzone offers better integration with the Mantine UI library and its styling system.

react-file-drop

react-file-drop is another React component for file drag-and-drop functionality. It provides a simple API for handling file drops and is lightweight compared to other solutions. While it lacks some of the advanced features of @mantine/dropzone, such as built-in previews and styling options, it is a good choice for projects that require a minimalistic approach.

README

Mantine Dropzone

Capture files from user

View documentation

Installation

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

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

License

MIT