{"_id":"@amirulabu/react-dropzone-uploader","_rev":"1-c8146283d53fb45fe0434ef2d61c2d10","name":"@amirulabu/react-dropzone-uploader","dist-tags":{"latest":"2.19.0"},"versions":{"2.19.0":{"name":"@amirulabu/react-dropzone-uploader","version":"2.19.0","author":{"name":"Kyle Bebak","email":"kylebebak@gmail.com"},"description":"React file dropzone and uploader: fully customizable, progress indicators, upload cancellation and restart, zero deps and excellent TypeScript support","main":"./dist/react-dropzone-uploader.js","types":"./dist/Dropzone.tsx","keywords":["react","react-component","file","HTML5","input","dropzone","uploader","progress","typescript","s3"],"repository":{"type":"git","url":"git://github.com/amirulabu/react-dropzone-uploader.git"},"license":"MIT","peerDependencies":{"prop-types":">=15.5.10","react":">=16.2.0","react-dom":">=16.2.0"},"devDependencies":{"@babel/core":"^7.1.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-function-bind":"^7.0.0","@babel/plugin-proposal-object-rest-spread":"^7.0.0","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@types/react":"^16.14.13","@types/react-dom":"^16.8.3","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","babel-loader":"^8.0.4","babel-polyfill":"^6.26.0","css-loader":"^1.0.0","docusaurus-init":"^1.0.2","enzyme":"^3.7.0","enzyme-adapter-react-16":"^1.7.0","html5-file-selector":"^2.1.0","husky":"^1.3.1","jest":"^23.6.0","prettier":"1.16.4","react":">=16.2.0","react-dom":">=16.2.0","react-styleguidist":"^8.0.6","react-test-renderer":"^16.6.3","react-toastify":"^4.5.2","style-loader":"^0.23.1","typescript":"^3.5.3","uglifyjs-webpack-plugin":"^2.0.1","url-loader":"^1.1.2","webpack":"^4.21.0","webpack-cli":"^3.1.2","webpack-dev-server":"^3.1.14"},"jest":{"moduleNameMapper":{"\\.(png|jpg|jpeg|gif|svg|woff|woff2)$":"<rootDir>/tests/fileMock.js"}},"scripts":{"build":"rm -rf dist && tsc && NODE_ENV=production webpack --config webpack.build.config.js && cp src/styles.css dist/styles.css && cp src/*.ts* dist","dev":"tsc -w -p tsconfig.dev.json & webpack-dev-server --config webpack.config.js --mode development --open","styleguide":"tsc -w & styleguidist server","build-styleguide":"tsc && styleguidist build","styleguide-quickstart":"tsc -w && styleguidist server --config styleguide-quickstart.config.js","build-styleguide-quickstart":"tsc && styleguidist build --config styleguide-quickstart.config.js","build-docs":"./build_docs.sh","test":"tsc && jest --coverage","prettier-check":"prettier --check src/**/*.ts src/**/*.tsx","prettier":"prettier --write src/**/*.ts src/**/*.tsx"},"dependencies":{"@babel/runtime":"^7.1.2"},"husky":{"hooks":{"pre-push":"npm run prettier-check"}},"gitHead":"9724368a179fb0e56358998e8ad123b16a7266ce","bugs":{"url":"https://github.com/amirulabu/react-dropzone-uploader/issues"},"homepage":"https://github.com/amirulabu/react-dropzone-uploader#readme","_id":"@amirulabu/react-dropzone-uploader@2.19.0","_nodeVersion":"12.16.3","_npmVersion":"7.18.1","dist":{"integrity":"sha512-XvGs0/xghqYIYbiyvaRHXGvuK+cVVPVkb9WlWQlcRVBBEcBHWvC4zROo44aJzoMzE5l0WYeXIfJfzGY1dBaNeg==","shasum":"0b4c09f18b5cf8843601b5d89ca2cd2851f1080f","tarball":"https://registry.npmjs.org/@amirulabu/react-dropzone-uploader/-/react-dropzone-uploader-2.19.0.tgz","fileCount":17,"unpackedSize":141773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFyFVCRA9TVsSAnZWagAANLgQAICwyA1S7LomFPRsUOaZ\ngICbbeCcDXuVOEmk4V0feuUtww5rdd2ecRB5NEVF8ODk7+bZW+voLl0qit45\nC5+NfxvMFROQfVYZkZipl3OJEnYZ7gv7Zrl5ObtrTWvarnvh6olMHmBRgvOj\nyUlFTlyO/30iwmSeEIIU0RpExPMj8dsn8cBSUVgRhRK9LQBl13qSTcl5o0dp\nJylXlLI1HaQ2epriEfkWMJPiYN4K7HbIYCCWfTH3HshT8DIDpxpYU2jvz5xQ\nzb0oni77KvpATXjyEsL+A7uBup4rqBFKdKCSgXzmwvaNV6DNf19CaYGUtHIm\npBkwTgi/ZXVOxRsxt6hk1ilv/Pi9SJ8uXooJUEMhG/pZ1b3U1KrFLriRGYSy\nkWtGpF4cCOIJNEYdPcJL/RHN0cUVGC165eDATTYA/Wg+dALCEXXFQaL9Rl5a\naC/VNtVNzDsz3NjPWLQVD3IO/ZPYxKXuWpYf+zDRUJcijksVujh6ooQJ+QaU\nIhpMawGRfbFcJqZDIi2/wsjQ3w7Br4UWZ7tIPfUKPf4lvcdmoDt6t+OdxAjY\nmNtS48m3C83762KKLYb5FnF078eAepVAGrLFiLzzQnZV+M9U5IvbSp7J40ED\noAPj/i5rC++gko2SVY5dSWRn2LRG2v1zdowD99YCxMVJtQ8xx54zjc1e9Fx1\nKdfj\r\n=XtZh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICGn0PcwAZUUvX05LITEOfKvIwC9e2od1Zq/F2cXvm6yAiEAwNMMsa62dFDAa0iBauQoxXA6xSgorBjRz2MtSCmBrWY="}]},"_npmUser":{"name":"amirulabu","email":"amirulabu@gmail.com"},"directories":{},"maintainers":[{"name":"amirulabu","email":"amirulabu@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-dropzone-uploader_2.19.0_1628905813406_0.013740124212932914"},"_hasShrinkwrap":false}},"time":{"created":"2021-08-14T01:50:13.354Z","2.19.0":"2021-08-14T01:50:13.580Z","modified":"2022-04-04T13:49:36.176Z"},"maintainers":[{"name":"amirulabu","email":"amirulabu@gmail.com"}],"description":"React file dropzone and uploader: fully customizable, progress indicators, upload cancellation and restart, zero deps and excellent TypeScript support","homepage":"https://github.com/amirulabu/react-dropzone-uploader#readme","keywords":["react","react-component","file","HTML5","input","dropzone","uploader","progress","typescript","s3"],"repository":{"type":"git","url":"git://github.com/amirulabu/react-dropzone-uploader.git"},"author":{"name":"Kyle Bebak","email":"kylebebak@gmail.com"},"bugs":{"url":"https://github.com/amirulabu/react-dropzone-uploader/issues"},"license":"MIT","readme":"# React Dropzone Uploader\n\n\n[![NPM](https://img.shields.io/npm/v/react-dropzone-uploader.svg)](https://www.npmjs.com/package/react-dropzone-uploader)\n[![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/react-dropzone-uploader.svg)](https://www.npmjs.com/package/react-dropzone-uploader)\n\nReact Dropzone Uploader is a customizable file dropzone and uploader for React.\n\n\n## Features\n- Detailed file metadata and previews, especially for image, video and audio files\n- Upload status and progress, upload cancellation and restart\n- Easily set auth headers and additional upload fields ([see S3 examples](https://react-dropzone-uploader.js.org/docs/s3))\n- Customize styles using CSS or JS\n- Take full control of rendering with component injection props\n- Take control of upload lifecycle\n- Modular design; use as standalone dropzone, file input, or file uploader\n- Cross-browser support, mobile friendly, including direct uploads from camera\n- Lightweight and fast\n- Excellent TypeScript definitions\n\n![](https://raw.githubusercontent.com/fortana-co/react-dropzone-uploader/master/rdu.gif)\n\n\n## Documentation\n<https://react-dropzone-uploader.js.org>\n\n\n## Installation\n`npm install --save react-dropzone-uploader`\n\nImport default styles in your app.\n\n~~~js\nimport 'react-dropzone-uploader/dist/styles.css'\n~~~\n\n\n## Quick Start\nRDU 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).\n\n~~~js\nimport 'react-dropzone-uploader/dist/styles.css'\nimport Dropzone from 'react-dropzone-uploader'\n\nconst MyUploader = () => {\n  // specify upload params and url for your files\n  const getUploadParams = ({ meta }) => { return { url: 'https://httpbin.org/post' } }\n  \n  // called every time a file's `status` changes\n  const handleChangeStatus = ({ meta, file }, status) => { console.log(status, meta, file) }\n  \n  // receives array of files that are done uploading when submit button is clicked\n  const handleSubmit = (files) => { console.log(files.map(f => f.meta)) }\n\n  return (\n    <Dropzone\n      getUploadParams={getUploadParams}\n      onChangeStatus={handleChangeStatus}\n      onSubmit={handleSubmit}\n      accept=\"image/*,audio/*,video/*\"\n    />\n  )\n}\n~~~\n\n\n## Examples\nSee more live examples here: <https://react-dropzone-uploader.js.org/docs/examples>.\n\n\n## Props\nCheck out [the full table of RDU's props](https://react-dropzone-uploader.js.org/docs/props).\n\n\n## Browser Support\n| Chrome | Firefox | Edge | Safari | IE | iOS Safari | Chrome for Android |\n| --- | --- | --- | --- | --- | --- | --- |\n| ✔ | ✔ | ✔ | 10+, 9\\* | 11\\* | ✔ | ✔ |\n\n\\* requires `Promise` polyfill, e.g. [@babel/polyfill](https://babeljs.io/docs/en/babel-polyfill)\n\n\n## UMD Build\nThis library is available as an ES Module at <https://unpkg.com/react-dropzone-uploader@VERSION/dist/react-dropzone-uploader.umd.js>.\n\nIf you want to include it in your page, you need to include the dependencies and CSS as well.\n\n~~~html\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js\"></script>\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js\"></script>\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.2/prop-types.min.js\"></script>\n\n<script src=\"https://unpkg.com/react-dropzone-uploader@VERSION/dist/react-dropzone-uploader.umd.js\"></script>\n<link rel\"stylesheet\" href=\"https://unpkg.com/react-dropzone-uploader@VERSION/dist/styles.css\"></script>\n~~~\n\n\n## Contributing\nThere are a number of places RDU could be improved; [see here](https://github.com/fortana-co/react-dropzone-uploader/labels/help%20wanted).\n\nFor 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.\n\n\n### Shout Outs\nThanks to @nchen63 for helping with [TypeScript defs](https://github.com/fortana-co/react-dropzone-uploader/blob/master/src/Dropzone.d.ts)!\n\n\n### Running Dev\nClone the project, install dependencies, and run the dev server.\n\n~~~sh\ngit clone git://github.com/fortana-co/react-dropzone-uploader.git\ncd react-dropzone-uploader\nyarn\nnpm run dev\n~~~\n\nThis runs code in `examples/src/index.js`, which has many examples that use `Dropzone`. The library source code is in the `/src` directory.\n\n\n## Thanks\nThanks to `react-dropzone`, `react-select`, and `redux-form` for inspiration.\n","readmeFilename":"README.md"}