DEV Community

Cover image for dropzone-ui: the new way of providing Drag and Drop File Uploads in React apps (part 1)
Jin Jose Manuel
Jin Jose Manuel

Posted on • Updated on

dropzone-ui: the new way of providing Drag and Drop File Uploads in React apps (part 1)

Introduction

Dropzone UI is a complete set of react components that allows developers to spend less time in coding a drag and drop zone for file uploads.

In standard HTML5 you can perform file uploads through
<input type="file">. Additionally there are packages like dropzone and react-dropzone that can handle this task very well.
However, inspired in the last ones, there was created something new and more powerful: dropzone-ui.

dropzone-ui-ondrag-sample

With this new tool you can easily display previews and also restrict file types, file size and amount of files. Furthermore, you can change the view mode to see the files as an horizontal list or as a grid.

dropzone-ui-ondrop-grid

As I said before, you can change the view mode by clicking the button on the top next to the "remove all" button:

dropzone-ui-ondrop-list

The last sample is important because you can also see 2 excellent functionalities:

  • Info layer
  • File status

Info Layer

The layer that shows all the relevant info about the file such as name, type and size.

File Status

The status of the file after being validated according to the validation criteria.

To make a Dropzone that supports the screenshots showed above you just need this code taken from CodesandBox:
Edit Button


import { Dropzone, FileItem, FullScreenPreview } from "dropzone-ui";
import { useState } from "react";
export default function App() {
  const [files, setFiles] = useState([]);
  const [imageSrc, setImageSrc] = useState(undefined);
  const updateFiles = (incommingFiles) => {
    console.log("incomming files", incommingFiles);
    setFiles(incommingFiles);
  };
  const onDelete = (id) => {
    setFiles(files.filter((x) => x.id !== id));
  };
  const handleSee = (imageSource) => {
    setImageSrc(imageSource);
  };
  return (
    <Dropzone
      onChange={updateFiles}
      value={files}
      maxFiles={10}
      maxFileSize={2998000}
    >
      {files.map((file) => (
        <FileItem
          {...file}
          onDelete={onDelete}
          onSee={handleSee}
          preview
          info
          hd
        />
      ))}

    </Dropzone>
  );
}


Enter fullscreen mode Exit fullscreen mode

Full Screen preview

One killer feature is that, combined with other component called "FullScreenPreview" from the same package, you can see a full screen image preview of a file.

import { Dropzone, FileItem, FullScreenPreview } from "dropzone-ui";
import { useState } from "react";
export default function App() {
  const [files, setFiles] = useState([]);
  const [imageSrc, setImageSrc] = useState(undefined);
  const updateFiles = (incommingFiles) => {
    console.log("incomming files", incommingFiles);
    setFiles(incommingFiles);
  };
  const onDelete = (id) => {
    setFiles(files.filter((x) => x.id !== id));
  };
  const handleSee = (imageSource) => {
    setImageSrc(imageSource);
  };
  return (
    <Dropzone
      onChange={updateFiles}
      value={files}
      maxFiles={10}
      maxFileSize={2998000}
    >
      {files.map((file) => (
        <FileItem
          {...file}
          onDelete={onDelete}
          onSee={handleSee}
          preview
          info
          hd
        />
      ))}
      <FullScreenPreview
        imgSource={imageSrc}
        openImage={imageSrc}
        onClose={(e) => handleSee(undefined)}
      />
    </Dropzone>
  );
}

Enter fullscreen mode Exit fullscreen mode

And this is the result after dropping files, and clicking on the view button on the file item wanted:

ironman-fullscreen-dropzone-ui

Localization

Last but not least, dropzone ui is available in Spanish through the localization prop:

import { Dropzone, FileItem, FullScreenPreview } from "dropzone-ui";
import { useState } from "react";
export default function App() {
  const [files, setFiles] = useState([]);
  const [imageSrc, setImageSrc] = useState(undefined);
  const updateFiles = (incommingFiles) => {
    console.log("incomming files", incommingFiles);
    setFiles(incommingFiles);
  };
  const onDelete = (id) => {
    setFiles(files.filter((x) => x.id !== id));
  };
  const handleSee = (imageSource) => {
    setImageSrc(imageSource);
  };
  return (
    <Dropzone
      onChange={updateFiles}
      value={files}
      maxFiles={10}
      maxFileSize={2998000}
      localization={"ES-es"}
    >
      {files.map((file) => (
        <FileItem
          {...file}
          onDelete={onDelete}
          onSee={handleSee}
          localization={"ES-es"}
          preview
          info
          hd
        />
      ))}
      <FullScreenPreview
        imgSource={imageSrc}
        openImage={imageSrc}
        onClose={(e) => handleSee(undefined)}
      />
    </Dropzone>
  );
}
Enter fullscreen mode Exit fullscreen mode

dropzone-ui-spanish

Conclusion

In conclusion, this is an amazing library for drag and drop files with image previews. This post cannot show the complete potential of dropzone-ui, but a general overview was provided. In fact, the information here is enough for start developing with his amazing tool. You can find more info in the documentation https://www.npmjs.com/package/dropzone-ui. In next posts I will show this package in deep.

Discussion (2)

Collapse
nijojoseph profile image
nikijoe

Good

Collapse
ayuechuan profile image
ayuechuan

Looking forward to your continued updates