dropzone-ui/README.md

React Library Component for drag’n’drop files. Easy to use. Material design style. Multilanguage support. Upload to server support.

:rocket: [Spanish](./README_ES.md)  

<p align="center">
<img align="center" with="128px" height="128px" src="https://user-images.githubusercontent.com/43678736/132112022-0ca409ae-cca2-43c8-be89-110376260a3f.png" alt="dropone-ui-logo">

<h1 align="center">dropzone-ui  </h1> 

`dropzone-ui` has mega-digievolved to [@dropzone-ui/react](https://www.npmjs.com/package/@dropzone-ui/react)  :milky_way:

</p>

[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/dropzone-ui/react/blob/HEAD/LICENSE)
[![npm latest package](https://img.shields.io/npm/v/@dropzone-ui/react.svg?logo=npm&logoColor=fff&label=NPM+package&color=limegreen)](https://www.npmjs.com/package/@dropzone-ui/react)
[![Rate on Openbase](https://badges.openbase.com/js/rating/@dropzone-ui/react.svg)](https://openbase.com/js/@dropzone-ui/react?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge)
[![Node.js CI](https://github.com/dropzone-ui/react-dropzone/actions/workflows/node.js.yml/badge.svg)](https://github.com/dropzone-ui/react-dropzone/actions/workflows/node.js.yml)
[![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/dropzone-ui/dropzone-ui.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/dropzone-ui/dropzone-ui/context:javascript)
[![Total alerts](https://img.shields.io/lgtm/alerts/g/dropzone-ui/dropzone-ui.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/dropzone-ui/dropzone-ui/alerts/)
[![Known Vulnerabilities](https://snyk.io/test/github/dropzone-ui/react/badge.svg)](https://snyk.io/test/github/dropzone-ui/react)
[![Package Quality](https://packagequality.com/shield/dropzone-ui.svg)](https://packagequality.com/#?package=dropzone-ui)
[![install size](https://packagephobia.com/badge?p=@dropzone-ui/react)](https://packagephobia.com/result?p=@dropzone-ui/react)
[![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/dropzone-ui/react.svg)](http://isitmaintained.com/project/dropzone-ui/react)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![GitHub Repo stars](https://img.shields.io/github/stars/dropzone-ui/react?label=Star%20me%20please%20:D&style=social)](https://github.com/dropzone-ui/react)
## Important

This package wraps all components of [@dropzone-ui/react](https://www.npmjs.com/package/@dropzone-ui/react). So, installing this package you are also installing [@dropzone-ui/react](https://www.npmjs.com/package/@dropzone-ui/react) as well through dependency tree.

## Key Features

- :white_check_mark: File validation: Validate files before uploading.
- :art: File Image previews: See a thumbnail preview
- :framed_picture: Full screen image previews: Add more interacion with a full screen preview of images
- :movie_camera: Full screen video previews. Play the video before uploading. [![new-feature](https://img.shields.io/badge/new-feature-green.svg)](https://github.com/dropzone-ui/react-dropzone/releases/tag/v6.4.0)
- :eyes: status visualization: validation and upload status is shown on a [Tooltip](https://codesandbox.io/s/dropzone-ui-fileitem-resultontooltip-h6hu7) or on [Info Layer](https://codesandbox.io/s/dropzone-ui-fileitem-resultontooltip-h6hu7).
- :airplane: File upload: Upload valid files to a server.
- :performing_arts: Out of the box design and style.
- :cake: Easy to use. Probably, this is the killer feature you are looking for in a package.
## QuickStart

- :books: [\<Full Documentation\>](https://www.npmjs.com/package/@dropzone-ui/react#dropzone-ui-react-components-api)

- :earth_americas: [\<Localization\>](https://www.npmjs.com/package/@dropzone-ui/react#localization)

- :performing_arts: [\<Examples and use cases\>](https://www.npmjs.com/package/@dropzone-ui/react#Usage-and-examples)

- :computer: [\<Server side implementation/>](https://www.npmjs.com/package/@dropzone-ui/react#uploading)

- [Code generator](#code-generator)

## Code generator

Want to generate the code that fits your needs? Just interact with the code generator [here](http://dropzone-ui.com/).

## Installation

dropzone-ui is available as an [npm package](https://www.npmjs.com/package/dropzone-ui).

For uploading files, peer dependency [axios](https://www.npmjs.com/package/axios) must be installed together with `dropzone-ui`.

```sh
// with npm
npm i dropzone-ui axios
```

```sh
// with yarn
yarn add dropzone-ui axios
```

## Sample result:

On `Drag`, `Drop`, `Upload` and ful screen preview. (also changing view mode from `grid` to `list`).

<p align="center">
<img align="center"  src="https://user-images.githubusercontent.com/43678736/139614260-602b512c-cf78-48fe-ae57-1057e7ec8135.gif" alt="dropone-ui-logo">

</p>

Did you like the project? Please, don't forget to give us a :star: star on :octocat: [github](https://github.com/dropzone-ui/dropzone-ui) :D 

<p align="center">
<img align="center"  src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5wxk14o6zhloz2z3zypy.png" alt="dropone-ui-logo">
</p>

## License

This project is licensed under the terms of the
[MIT license](/LICENSE).