Material-UI Dropzone

Pro Component

Dropzone JS is an open-source library that provides drag’n’ drop file uploads with image previews. It is lightweight, doesn’t depend on any other library (like jQuery) and is highly customisable. Dropzone JS supports image previews and shows nice progress bars.
Keep reading our Material-ui Dropzone JS examples and learn how to use this plugin.

Usage

Examples

Copy any of the code examples below and paste it in your project after you integrated the needed resources.

Single file

Choose file

import React from "react";
// plugin for drag-and-drop files
import Dropzone from "dropzone";
// @material-ui/core components
// @material-ui/lab components
// @material-ui/icons components
// core components

const Components = () => {
  // single file drag-and-drop dropzone init
  React.useEffect(() => {
    if (
      !document
        .getElementById("dropzone-single")
        .classList.contains("dz-clickable")
    ) {
      Dropzone.autoDiscover = false;
      // this variable is to delete the previous image from the dropzone state
      // it is just to make the HTML DOM a bit better, and keep it light
      let currentSingleFile = undefined;
      // single dropzone file - accepts only images
      let singleDropzone = new Dropzone(
        document.getElementById("dropzone-single"),
        {
          url: "/",
          thumbnailWidth: null,
          thumbnailHeight: null,
          previewsContainer: document.getElementsByClassName(
            "dz-preview-single"
          )[0],
          previewTemplate: document.getElementsByClassName(
            "dz-preview-single"
          )[0].innerHTML,
          maxFiles: 1,
          acceptedFiles: "image/*",
          init: function () {
            this.on("addedfile", function (file) {
              if (currentSingleFile) {
                this.removeFile(currentSingleFile);
              }
              currentSingleFile = file;
            });
          },
        }
      );
      document.getElementsByClassName("dz-preview-single")[0].innerHTML = "";
      return function cleanup() {
        singleDropzone.destroy();
      };
    }
  }, []);
  return (
    <>
      <div className="dropzone dropzone-single mb-3" id="dropzone-single">
        <div className="fallback">
          <div className="custom-file">
            <input
              className="custom-file-input"
              id="projectCoverUploads"
              type="file"
            />
            <label className="custom-file-label" htmlFor="projectCoverUploads">
              Choose file
            </label>
          </div>
        </div>
        <div className="dz-preview dz-preview-single">
          <div className="dz-preview-cover">
            <img alt="..." className="dz-preview-img" data-dz-thumbnail="" />
          </div>
        </div>
      </div>
    </>
  );
};

export default Components;

Multiple files

Choose file

...

...

Remove

import React from "react";
// plugin for drag-and-drop files
import Dropzone from "dropzone";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Avatar from "@material-ui/core/Avatar";
import Box from "@material-ui/core/Box";
import Button from "@material-ui/core/Button";
import Grid from "@material-ui/core/Grid";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import Typography from "@material-ui/core/Typography";
// @material-ui/lab components
// @material-ui/icons components
import Delete from "@material-ui/icons/Delete";
// core components
import componentStyles from "assets/theme/views/admin/components.js";
import componentStylesButtons from "assets/theme/components/button.js";

const useStyles = makeStyles(componentStyles);
const useStylesButtons = makeStyles(componentStylesButtons);

const Components = () => {
  const classes = {
    ...useStyles(),
    ...useStylesButtons(),
  };
  // multiple file drag-and-drop dropzone init
  React.useEffect(() => {
    if (
      !document
        .getElementById("dropzone-multiple")
        .classList.contains("dz-clickable")
    ) {
      Dropzone.autoDiscover = false;
      // this variable is to delete the previous image from the dropzone state
      // it is just to make the HTML DOM a bit better, and keep it light
      let currentMultipleFile = undefined;
      // multiple dropzone file - accepts any type of file
      new Dropzone(document.getElementById("dropzone-multiple"), {
        url: "https://",
        thumbnailWidth: null,
        thumbnailHeight: null,
        previewsContainer: document.getElementsByClassName(
          "dz-preview-multiple"
        )[0],
        previewTemplate: document.getElementsByClassName(
          "dz-preview-multiple"
        )[0].innerHTML,
        maxFiles: null,
        acceptedFiles: null,
        init: function () {
          this.on("addedfile", function (file) {
            if (currentMultipleFile) {
            }
            currentMultipleFile = file;
          });
        },
      });
      document.getElementsByClassName("dz-preview-multiple")[0].innerHTML = "";
    }
  }, []);
  const dzAvatarClasses = {
    root: classes.dropzoneAvatarRoot,
    img: classes.dropzoneAvatarImg,
  };
  const dzAvatarImgProps = {
    "data-dz-thumbnail": true,
  };
  const dzButtonClasses = {
    root:
      classes.buttonContainedError +
      " " +
      classes.buttonIconOnly,
  };
  return (
    <>
      <div className="dropzone dropzone-single mb-3" id="dropzone-single">
        <div className="fallback">
          <div className="custom-file">
            <input
              className="custom-file-input"
              id="projectCoverUploads"
              type="file"
            />
            <label className="custom-file-label" htmlFor="projectCoverUploads">
              Choose file
            </label>
          </div>
        </div>
        <div className="dz-preview dz-preview-single">
          <div className="dz-preview-cover">
            <img alt="..." className="dz-preview-img" data-dz-thumbnail="" />
          </div>
        </div>
      </div>
      <div
        id="dropzone-multiple"
        className="dropzone dropzone-multiple"
        data-toggle="dropzone"
        data-dropzone-multiple
        data-dropzone-url="http://"
      >
        <div className="fallback">
          <div className="custom-file">
            <input
              type="file"
              className="custom-file-input"
              id="customFileUploadMultiple"
              multiple
            />
            <label
              className="custom-file-label"
              htmlFor="customFileUploadMultiple"
            >
              Choose file
            </label>
          </div>
        </div>
        <List className="dz-preview dz-preview-multiple">
          <ListItem>
            <Grid container component={Box} alignItems="center">
              <Grid item xs="auto">
                <Avatar
                  src="..."
                  alt="..."
                  classes={dzAvatarClasses}
                  imgProps={dzAvatarImgProps}
                ></Avatar>
              </Grid>
              <Grid
                item
                component={Box}
                maxWidth="100%"
                flexBasis="0"
                flexGrow="1"
              >
                <Typography
                  variant="h4"
                  component="h4"
                  data-dz-name
                ></Typography>
                <Box
                  component="p"
                  marginBottom="0"
                  fontWeight="300"
                  lineHeight="1.7"
                  fontSize="1rem"
                  marginTop="0"
                  data-dz-size
                >
                  ...
                </Box>
              </Grid>
              <Grid item xs="auto">
                <Button
                  size="small"
                  data-dz-remove
                  classes={dzButtonClasses}
                >
                  <Box component={Delete} position="relative" top="-2px" />
                </Button>
              </Grid>
            </Grid>
          </ListItem>
        </List>
      </div>
    </>
  );
};

export default Components;

Props

If you want to see more examples and properties please check the official Dropzone Documentation.

You can also check the Official Github Repository.