{"id":15984271,"url":"https://github.com/fortana-co/react-dropzone-uploader","last_synced_at":"2025-05-15T15:09:40.598Z","repository":{"id":34160914,"uuid":"153960539","full_name":"fortana-co/react-dropzone-uploader","owner":"fortana-co","description":"React file dropzone and uploader","archived":false,"fork":false,"pushed_at":"2024-04-01T14:04:19.000Z","size":6389,"stargazers_count":450,"open_issues_count":156,"forks_count":185,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-03-31T19:11:11.435Z","etag":null,"topics":["dropzone","file-upload","input","react","s3","typescript","uploader"],"latest_commit_sha":null,"homepage":"https://react-dropzone-uploader.js.org/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fortana-co.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-10-21T00:34:51.000Z","updated_at":"2025-03-28T15:24:35.000Z","dependencies_parsed_at":"2024-06-21T19:19:39.396Z","dependency_job_id":"3c220983-b722-4986-98b7-3f676fdcaac8","html_url":"https://github.com/fortana-co/react-dropzone-uploader","commit_stats":{"total_commits":192,"total_committers":4,"mean_commits":48.0,"dds":0.08854166666666663,"last_synced_commit":"89aa88acf753962398fee967d0e4b5ac5d53065a"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fortana-co%2Freact-dropzone-uploader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fortana-co%2Freact-dropzone-uploader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fortana-co%2Freact-dropzone-uploader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fortana-co%2Freact-dropzone-uploader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fortana-co","download_url":"https://codeload.github.com/fortana-co/react-dropzone-uploader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246709871,"owners_count":20821298,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dropzone","file-upload","input","react","s3","typescript","uploader"],"created_at":"2024-10-08T02:06:01.900Z","updated_at":"2025-04-07T20:11:31.337Z","avatar_url":"https://github.com/fortana-co.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"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\u003chttps://react-dropzone-uploader.js.org\u003e\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 = () =\u003e {\n  // specify upload params and url for your files\n  const getUploadParams = ({ meta }) =\u003e { return { url: 'https://httpbin.org/post' } }\n  \n  // called every time a file's `status` changes\n  const handleChangeStatus = ({ meta, file }, status) =\u003e { console.log(status, meta, file) }\n  \n  // receives array of files that are done uploading when submit button is clicked\n  const handleSubmit = (files) =\u003e { console.log(files.map(f =\u003e f.meta)) }\n\n  return (\n    \u003cDropzone\n      getUploadParams={getUploadParams}\n      onChangeStatus={handleChangeStatus}\n      onSubmit={handleSubmit}\n      accept=\"image/*,audio/*,video/*\"\n    /\u003e\n  )\n}\n~~~\n\n\n## Examples\nSee more live examples here: \u003chttps://react-dropzone-uploader.js.org/docs/examples\u003e.\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 \u003chttps://unpkg.com/react-dropzone-uploader@VERSION/dist/react-dropzone-uploader.umd.js\u003e.\n\nIf you want to include it in your page, you need to include the dependencies and CSS as well.\n\n~~~html\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.2/prop-types.min.js\"\u003e\u003c/script\u003e\n\n\u003cscript src=\"https://unpkg.com/react-dropzone-uploader@VERSION/dist/react-dropzone-uploader.umd.js\"\u003e\u003c/script\u003e\n\u003clink rel\"stylesheet\" href=\"https://unpkg.com/react-dropzone-uploader@VERSION/dist/styles.css\"\u003e\u003c/script\u003e\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffortana-co%2Freact-dropzone-uploader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffortana-co%2Freact-dropzone-uploader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffortana-co%2Freact-dropzone-uploader/lists"}