https://github.com/dropzone-ui/dropzone-ui-react
The most complete React Library Component for drag’n’drop files. Image and video previews. File validation. Multilanguage. Server side support.
https://github.com/dropzone-ui/dropzone-ui-react
axios dropzone-ui file-upload form form-data form-validation french-translation hacktoberfest javascript localization material-design portuguese-translation react react-dropzone reactjs spanish-translation typescript
Last synced: 4 months ago
JSON representation
The most complete React Library Component for drag’n’drop files. Image and video previews. File validation. Multilanguage. Server side support.
- Host: GitHub
- URL: https://github.com/dropzone-ui/dropzone-ui-react
- Owner: dropzone-ui
- License: mit
- Created: 2021-09-02T03:50:37.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-04-23T22:48:48.000Z (over 2 years ago)
- Last Synced: 2025-07-08T16:12:15.193Z (6 months ago)
- Topics: axios, dropzone-ui, file-upload, form, form-data, form-validation, french-translation, hacktoberfest, javascript, localization, material-design, portuguese-translation, react, react-dropzone, reactjs, spanish-translation, typescript
- Language: TypeScript
- Homepage: https://www.files-ui.com
- Size: 6.33 MB
- Stars: 216
- Watchers: 6
- Forks: 24
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
:rocket: [Spanish README](./README_ES.md)
# Dropzone UI
[](https://github.com/dropzone-ui/react/blob/HEAD/LICENSE)
[](https://www.npmjs.com/package/@dropzone-ui/react)
[](https://openbase.com/js/@dropzone-ui/react?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge)
[](https://kandi.openweaver.com/typescript/dropzone-ui/dropzone-ui-react)
[](https://github.com/dropzone-ui/dropzone-ui-react)
[](https://app.travis-ci.com/dropzone-ui/dropzone-ui-react)
[](https://snyk.io/test/github/dropzone-ui/react)
[](https://packagequality.com/#?package=dropzone-ui)
[](https://packagephobia.com/result?p=@dropzone-ui/react)
[](http://isitmaintained.com/project/dropzone-ui/react)
[](http://makeapullrequest.com)
[](https://github.com/dropzone-ui/react)
Thank you so much for using dropzone-ui/react ❤️ !
Dropzone UI has grown very fast and has exceeded its original scope. That's why we find reasonable to rebrand it and create a new package taking the best of this one and adding more features and new components. This new package is here and its name is Files UI ⚡.
In an very near future we'll stop giving support to dropzone-ui, so we enforce you to upgrade to this new package. In the meanwhile this package will become a wrapper for files-ui.
:zap: Live demos and full documentation : [files-ui.com](https://files-ui.vercel.app)
:heart: it ?, support us by giving a :star: on :octocat: [Github](https://github.com/files-ui/files-ui-react) :D
## Important
From now on [@files-ui/react](https://www.npmjs.com/package/@files-ui/react) is the only dependency. Check out the changelog file to know what's new.
## Sample result:
This is a small part of what you can find on files-ui :eyes:
- More previews [here](#more-previews).
## Requirement
`@dropzone-ui/react` is based on [React Hooks](https://reactjs.org/docs/hooks-intro.html). It requires `react v16.8+`.
## Installation
@dropzone-ui/react is available as an [npm package](https://www.npmjs.com/package/@dropzone-ui/react).
```sh
// with npm
npm i @dropzone-ui/react
```
```sh
// with yarn
yarn add @dropzone-ui/react
```
## Usage and examples
Here is a quick example to get you started, **it's all you need**:
```jsx
import * as React from "react";
import ReactDOM from "react-dom";
import { Dropzone, FileMosaic } from "@dropzone-ui/react";
function App() {
const [files, setFiles] = React.useState([]);
const updateFiles = (incommingFiles) => {
setFiles(incommingFiles);
};
return (
{files.map((file) => (
))}
);
}
ReactDOM.render(, document.querySelector("#app"));
```
Yes, it's really all you need to get started as you can see in these live and interactive demos:
| Basic Sample :cake: | Advanced Sample :hammer: |
| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| [](https://codesandbox.io/s/basic-demo-js-blssi1?file=/src/App.js) | [](https://codesandbox.io/s/advanced-demo-js-6euo8j?file=/src/App.js) |
## API documentation
The complete documentation of every component has been moved to files-ui.com [API page](https://www.files-ui.com/api/dropzone).
However if you are still using dropzone-ui version 6.7.0 or lower, you can find the documentation and demos here:
- ⚡ [Samples](https://www.npmjs.com/package/@dropzone-ui/react/v/6.7.20?activeTab=readme#Usage-and-examples)
- 📚 [Docs](https://www.npmjs.com/package/@dropzone-ui/react/v/6.7.20#dropzone-ui-react-components-api).
## Supporters
Special thanks to these amazing people :star: :
### :clap: Stargazers
[](https://github.com/dropzone-ui/dropzone-ui-react/stargazers)
### :clap: Forkers
[](https://github.com/dropzone-ui/dropzone-ui-react/network/members)
## More Previews
Image full screen preview 🖼️
Video full screen preview 🎞️
FileCard, FileInputButton and Avatar preview 🎴
DarkMode 🌙 🌞
## License
This project is licensed under the terms of the
[MIT license](/LICENSE).
