Gathering detailed insights and metrics for @vizualabstract/react-dropzone-uploader
Gathering detailed insights and metrics for @vizualabstract/react-dropzone-uploader
Gathering detailed insights and metrics for @vizualabstract/react-dropzone-uploader
Gathering detailed insights and metrics for @vizualabstract/react-dropzone-uploader
React file dropzone and uploader
npm install @vizualabstract/react-dropzone-uploader
Typescript
Module System
Node Version
NPM Version
66.6
Supply Chain
93.1
Quality
74.9
Maintenance
100
Vulnerability
100
License
TypeScript (64.21%)
JavaScript (25.46%)
CSS (4.71%)
HTML (2.66%)
Python (2.53%)
Shell (0.43%)
Total Downloads
36,388
Last Day
1
Last Week
8
Last Month
13
Last Year
101
MIT License
247 Commits
1 Forks
13 Branches
1 Contributors
Updated on Mar 02, 2022
Minified
Minified + Gzipped
Latest Version
2.24.0
Package Id
@vizualabstract/react-dropzone-uploader@2.24.0
Unpacked Size
138.15 kB
Size
39.06 kB
File Count
17
NPM Version
8.5.5
Node Version
16.15.0
Cumulative downloads
Total Downloads
Last Day
-50%
1
Compared to previous day
Last Week
100%
8
Compared to previous week
Last Month
18.2%
13
Compared to previous month
Last Year
-98.9%
101
Compared to previous year
1
3
33
React Dropzone Uploader is a customizable file dropzone and uploader for React.
https://react-dropzone-uploader.js.org
npm install --save react-dropzone-uploader
Import default styles in your app.
1import 'react-dropzone-uploader/dist/styles.css'
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}
See more live examples here: https://react-dropzone-uploader.js.org/docs/examples.
Check out the full table of RDU's props.
Chrome | Firefox | Edge | Safari | IE | iOS Safari | Chrome for Android |
---|---|---|---|---|---|---|
✔ | ✔ | ✔ | 10+, 9* | 11* | ✔ | ✔ |
* requires Promise
polyfill, e.g. @babel/polyfill
This library is available as an ES Module at https://unpkg.com/react-dropzone-uploader@VERSION/dist/react-dropzone-uploader.umd.js.
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>
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.
Thanks to @nchen63 for helping with TypeScript defs!
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.
Thanks to react-dropzone
, react-select
, and redux-form
for inspiration.
No vulnerabilities found.
No security vulnerabilities found.