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

#react #typescript #upload #javascript

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.

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.

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

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:


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>
  );
}

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>
  );
}

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

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>
  );
}

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.