Dropzone-File Uploads

OverviewOfficial Website

Dropzone.js is one of the most popular drag and drop JavaScript libraries. It is free, fully open source, and makes it easy for you to handle dropped files on your website.

Import Package

<!-- dropzone -->
import Dropzone from "react-dropzone";

Add Package

yarn add react-dropzone --save

Remove Package

yarn remove react-dropzone or you can remove package by removing specific package from package.json

Examples

Title Javascript

Dropzone

Title	Javascript
Dropzone	const [selectedFiles, setselectedFiles] = useState([]); function handleAcceptedFiles(files: any) { files.map(file: any => Object.assign(file, { preview: URL.createObjectURL(file), formattedSize: formatBytes(file.size), }) ); setselectedFiles(files); } /** * Formats the size */ function formatBytes(bytes, decimals = 2) { if (bytes === 0) return "0 Bytes"; const k = 1024; const dm = decimals < 0 ? 0 : decimals; const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]; const i = Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i]; } <Dropzone onDrop={acceptedFiles => { handleAcceptedFiles(acceptedFiles); }} > {({ getRootProps, getInputProps }) => ( <div> <div {...getRootProps()} > <Box mb={2} display={"flex"} justifyContent={"center"} > <CloudUploadIcon fontSize="large" /> </Box> <Typography sx={{color:inherit, fontSize:16, fontWeight:600}}>Drop files here or click to upload.</Typography> </div> </div> )} </Dropzone>

const [selectedFiles, setselectedFiles] = useState([]);

  function handleAcceptedFiles(files: any) {
    files.map(file: any =>
      Object.assign(file, {
        preview: URL.createObjectURL(file),
        formattedSize: formatBytes(file.size),
      })
    );
    setselectedFiles(files);
  }

  /**
   * Formats the size
   */
  function formatBytes(bytes, decimals = 2) {
    if (bytes === 0) return "0 Bytes";
    const k = 1024;
    const dm = decimals < 0 ? 0 : decimals;
    const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];

    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
  }

  <Dropzone
  onDrop={acceptedFiles => {
      handleAcceptedFiles(acceptedFiles);
  }}
>
  {({ getRootProps, getInputProps }) => (
      <div>
          <div 
              {...getRootProps()}
          >
              <Box mb={2} display={"flex"} justifyContent={"center"}  >
                 <CloudUploadIcon  fontSize="large"  />
              </Box>
              <Typography sx={{color:inherit, fontSize:16, fontWeight:600}}>Drop files here or click to upload.</Typography>
          </div>
      </div>
  )}
</Dropzone>