dropzone-ui: the new way of providing Drag and Drop File Uploads in React apps (part 1)
Tags: react, typescript, upload, javascript
Published: 2021-09-26 03:51:42

#Introduction
[Dropzone UI](https://www.npmjs.com/package/@dropzone-ui/react) 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"\>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file). Additionally there are packages like [dropzone](https://www.npmjs.com/package/dropzone) and [react-dropzone](https://www.npmjs.com/package/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](https://www.npmjs.com/package/dropzone-ui).

<img align="center" width="10%" src="https://user-images.githubusercontent.com/43678736/132642335-dc7e7ceb-ae86-4f81-8625-4ee28dc5f593.png" alt="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.

<img align="center" width="35%" src="https://user-images.githubusercontent.com/43678736/132642339-2cd996a3-7754-46c9-89ed-56291972154f.png" alt="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: 

<img align="center" width="35%" src="https://user-images.githubusercontent.com/43678736/132642341-b1eb2bfe-8134-4cdf-a808-62b14058b4c1.png" alt="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](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/complete-946hz?file=/src/index.js)
```jsx

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.

```js
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:

![ironman-fullscreen-dropzone-ui](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5wxk14o6zhloz2z3zypy.png)

## Localization
Last but not least, dropzone ui is available in Spanish through the `localization` prop:
```jsx
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>
  );
}
```
![dropzone-ui-spanish](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x87x055vdd6dtrmooaj5.png)

## 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](https://www.npmjs.com/package/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.