# react-dropzone-uploader > React file dropzone and uploader: fully customizable, progress indicators, upload cancellation and restart, zero deps and excellent TypeScript support Latest version **2.11.0** (published 2019-11-13) · MIT license · 0 weekly downloads ## Install ```sh npm install react-dropzone-uploader pnpm add react-dropzone-uploader yarn add react-dropzone-uploader bun add react-dropzone-uploader ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.11.0 | | Published | 2019-11-13 | | First published | 2018-10-19 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 1 | | Unpacked size | 134.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 450 | | Author | Kyle Bebak | | Maintainers | kylebebak | | Keywords | react, react-component, file, HTML5, input, dropzone, uploader, progress, typescript, s3 | ## Links - npm: https://www.npmjs.com/package/react-dropzone-uploader - Repository: https://github.com/fortana-co/react-dropzone-uploader - Homepage: https://github.com/fortana-co/react-dropzone-uploader#readme - Issues: https://github.com/fortana-co/react-dropzone-uploader/issues - npm.io page: https://npm.io/package/react-dropzone-uploader ## Dependencies (1) - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.1.2 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 2.11.0 (latest) — 2019-11-13 - 2.10.2 — 2019-10-18 - 2.10.1 — 2019-07-05 - 2.10.0 — 2019-05-06 - 2.9.0 — 2019-04-16 - 2.8.1 — 2019-04-07 - 2.8.0 — 2019-04-04 - 2.7.0 — 2019-03-10 - 2.6.0 — 2019-03-08 - 2.5.2 — 2019-02-15 - 2.5.1 — 2019-01-25 - 2.5.0 — 2018-12-22 - 2.4.0 — 2018-11-28 - 2.3.1 — 2018-11-28 - 2.3.0 — 2018-11-27 - … 14 more at https://npm.io/package/react-dropzone-uploader/versions ## README # React Dropzone Uploader [![NPM](https://img.shields.io/npm/v/react-dropzone-uploader.svg)](https://www.npmjs.com/package/react-dropzone-uploader) [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/react-dropzone-uploader.svg)](https://www.npmjs.com/package/react-dropzone-uploader) React Dropzone Uploader is a customizable file dropzone and uploader for React. ## Features - Detailed file metadata and previews, especially for image, video and audio files - Upload status and progress, upload cancellation and restart - Easily set auth headers and additional upload fields ([see S3 examples](https://react-dropzone-uploader.js.org/docs/s3)) - Customize styles using CSS or JS - Take full control of rendering with component injection props - Take control of upload lifecycle - Modular design; use as standalone dropzone, file input, or file uploader - Cross-browser support, mobile friendly, including direct uploads from camera - Lightweight and fast - Excellent TypeScript definitions ![](https://raw.githubusercontent.com/fortana-co/react-dropzone-uploader/master/rdu.gif) ## Documentation ## Installation `npm install --save react-dropzone-uploader` Import default styles in your app. ~~~js import 'react-dropzone-uploader/dist/styles.css' ~~~ ## Quick Start RDU handles common use cases with almost no config. The following code gives you a dropzone and clickable file input that accepts image, audio and video files. It uploads files to `https://httpbin.org/post`, and renders a button to submit files that are done uploading. [Check out a live demo](https://react-dropzone-uploader.js.org/docs/quick-start). ~~~js import 'react-dropzone-uploader/dist/styles.css' import Dropzone from 'react-dropzone-uploader' const MyUploader = () => { // specify upload params and url for your files const getUploadParams = ({ meta }) => { return { url: 'https://httpbin.org/post' } } // called every time a file's `status` changes const handleChangeStatus = ({ meta, file }, status) => { console.log(status, meta, file) } // receives array of files that are done uploading when submit button is clicked const handleSubmit = (files) => { console.log(files.map(f => f.meta)) } return ( ) } ~~~ ## Examples See more live examples here: . ## Props Check out [the full table of RDU's props](https://react-dropzone-uploader.js.org/docs/props). ## Browser Support | Chrome | Firefox | Edge | Safari | IE | iOS Safari | Chrome for Android | | --- | --- | --- | --- | --- | --- | --- | | ✔ | ✔ | ✔ | 10+, 9\* | 11\* | ✔ | ✔ | \* requires `Promise` polyfill, e.g. [@babel/polyfill](https://babeljs.io/docs/en/babel-polyfill) ## UMD Build This library is available as an ES Module at . If you want to include it in your page, you need to include the dependencies and CSS as well. ~~~html ~~~ ## Contributing There are a number of places RDU could be improved; [see here](https://github.com/fortana-co/react-dropzone-uploader/labels/help%20wanted). For example, RDU has solid core functionality, but has a minimalist look and feel. It would be more beginner-friendly with a larger variety of built-in components. ### Shout Outs Thanks to @nchen63 for helping with [TypeScript defs](https://github.com/fortana-co/react-dropzone-uploader/blob/master/src/Dropzone.d.ts)! ### Running Dev Clone the project, install dependencies, and run the dev server. ~~~sh git clone git://github.com/fortana-co/react-dropzone-uploader.git cd react-dropzone-uploader yarn npm run dev ~~~ This runs code in `examples/src/index.js`, which has many examples that use `Dropzone`. The library source code is in the `/src` directory. ## Thanks Thanks to `react-dropzone`, `react-select`, and `redux-form` for inspiration. --- _Source: https://npm.io/package/react-dropzone-uploader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._