react-dropzone-uploader

npmpackage.info

Gathering detailed insights and metrics for react-dropzone-uploader

Other packages similar to react-dropzone-uploader

react-dropzone-s3-uploader

1.1.0

Drag and drop s3 file uploader via react-dropzone + react-s3-uploader

react-uploader

3.43.0

React File Upload UI Widget — Lightweight & supports: drag and drop, multiple uploads, image cropping, customization & more 🚀 Comes with Cloud Storage 🌐

@vizualabstract/react-dropzone-uploader

2.24.0

React file dropzone and uploader: fully customizable, progress indicators, upload cancellation and restart, zero deps and excellent TypeScript support

@cfculhane/react-dropzone-uploader

2.22.0

React file dropzone and uploader: fully customizable, progress indicators, upload cancellation and restart, zero deps and excellent TypeScript support

Gathering detailed insights and metrics for react-dropzone-uploader

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)

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

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.

1import 'react-dropzone-uploader/dist/styles.css' 2import Dropzone from 'react-dropzone-uploader' 3 4const MyUploader = () => { 5 // specify upload params and url for your files 6 const getUploadParams = ({ meta }) => { return { url: 'https://httpbin.org/post' } } 7 8 // called every time a file's `status` changes 9 const handleChangeStatus = ({ meta, file }, status) => { console.log(status, meta, file) } 10 11 // receives array of files that are done uploading when submit button is clicked 12 const handleSubmit = (files) => { console.log(files.map(f => f.meta)) } 13 14 return ( 15 <Dropzone 16 getUploadParams={getUploadParams} 17 onChangeStatus={handleChangeStatus} 18 onSubmit={handleSubmit} 19 accept="image/*,audio/*,video/*" 20 /> 21 ) 22}

Chrome	Firefox	Edge	Safari	IE	iOS Safari	Chrome for Android
✔	✔	✔	10+, 9*	11*	✔	✔

Chrome

Firefox

Edge

Safari

iOS Safari

Chrome for Android

✔

10+, 9*

11*

✔

UMD Build

If you want to include it in your page, you need to include the dependencies and CSS as well.

1<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script> 2<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js"></script> 3<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.2/prop-types.min.js"></script> 4 5<script src="https://unpkg.com/react-dropzone-uploader@VERSION/dist/react-dropzone-uploader.umd.js"></script> 6<link rel"stylesheet" href="https://unpkg.com/react-dropzone-uploader@VERSION/dist/styles.css"></script>

Contributing

There are a number of places RDU could be improved; see here.

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!

Running Dev

Clone the project, install dependencies, and run the dev server.

1git clone git://github.com/fortana-co/react-dropzone-uploader.git 2cd react-dropzone-uploader 3yarn 4npm 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.

Other packages similar to react-dropzone-uploader

Other packages similar to react-dropzone-uploader

Installations

Developer Guide

Yes

CommonJS

10.16.0

6.11.2

Score

Pull Requests

64

98

33

1

Issues

92

121

29

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

41.64 kB

13.12 kB

Maintainers

Package Meta Information

Total Downloads

6,746,061

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

React Dropzone Uploader

Features

Documentation

Installation

Quick Start

Examples

Props

Browser Support

UMD Build

Contributing

Shout Outs

Running Dev

Thanks

10

10

0

0

0

0

0

0

0

0

1.7

/10