{"id":18563127,"url":"https://github.com/compulim/react-drop-to-upload","last_synced_at":"2025-07-16T12:05:33.585Z","repository":{"id":82478946,"uuid":"69237757","full_name":"compulim/react-drop-to-upload","owner":"compulim","description":"A simple React component for \"drop-to-upload\" feature","archived":false,"fork":false,"pushed_at":"2018-07-19T22:35:08.000Z","size":64,"stargazers_count":6,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-11T10:49:54.893Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/compulim.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","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":"2016-09-26T10:08:38.000Z","updated_at":"2021-04-26T21:07:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"c3eae12b-390d-4d62-a52d-9a3c2a7db9be","html_url":"https://github.com/compulim/react-drop-to-upload","commit_stats":{"total_commits":25,"total_committers":2,"mean_commits":12.5,"dds":0.07999999999999996,"last_synced_commit":"fc6c42f7332cce4bf76fd1304789165108ec1c86"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/compulim/react-drop-to-upload","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/compulim%2Freact-drop-to-upload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/compulim%2Freact-drop-to-upload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/compulim%2Freact-drop-to-upload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/compulim%2Freact-drop-to-upload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/compulim","download_url":"https://codeload.github.com/compulim/react-drop-to-upload/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/compulim%2Freact-drop-to-upload/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265002559,"owners_count":23696076,"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":[],"created_at":"2024-11-06T22:11:52.524Z","updated_at":"2025-07-16T12:05:33.211Z","avatar_url":"https://github.com/compulim.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# HTML5 drop-to-upload component for React\n\n[![NPM version](https://img.shields.io/npm/v/react-drop-to-upload.svg)](https://npmjs.org/package/react-drop-to-upload)\n\nA simple React component for \"drop-to-upload\" feature. Files dropped will be returned as [`File`](https://w3c.github.io/FileAPI/), `ArrayBuffer`, and data URI.\n\nIt supports Internet Explorer 10 and up, and all major desktop browsers. You can also check up-to-date browser compatibilities at [Can I use ___?](http://caniuse.com/#feat=dragndrop).\n\n## Why another file drop component?\n\nMost file drop components are comprehensive and restrictive. They do all the heavylifting including file drop and HTTP POST upload. They all have good intentions. But to ensure everything works as expected, developers may need to follow their way to work, include adding specific server code.\n\nWe embrace microservices and focus on making a great, small, and simple-to-learn UI component. We believe React component should not cross the visualization border and touch any transport code.\n\nThus, we intentionally leave the HTTP POST upload part away from the component, for a few good reasons.\n\n1. Select your transport. `XMLHttpRequest` or [`window.fetch`](https://github.github.io/fetch/), add HTTP headers, use multipart, and flexible CORS handling\n2. Be creative. Dropping file means more than just upload. You could generate thumbnails, [calculate MD5](https://www.npmjs.com/package/spark-md5), [open PDF](http://mozilla.github.io/pdf.js/), etc\n3. Be flexible. Use [JSZip](https://stuk.github.io/jszip/) to compress plain text files before upload\n\n## How to use\n\nInstall our package thru NPM.\n\n```\nnpm install react-drop-to-upload\n```\n\nAdd the following code to your React component to import the `react-drop-to-upload` component.\n\n```js\nimport DropToUpload from 'react-drop-to-upload';\n```\n\nAnd in the render loop, add the following JSX code to instantiate the component.\n\n```jsx\n\n\u003cDropToUpload\n  onDrop={ this.handleDrop }\n\u003e\n  Drop file here to upload\n\u003c/DropToUpload\u003e\n```\n\nBy default, `\u003cDropToUpload\u003e` is realized as `\u003cdiv\u003e`, it can be modified thru the `element` props.\n\nWhen a file is dropped, `handleDrop` will be triggered. For example, the following code use `FormData` and [`fetch`](https://github.com/github/fetch) to upload all dropped files to the server at `/upload` via HTTP POST.\n\n```js\nhandleDrop(files) {\n  var data = new FormData();\n\n  files.forEach((file, index) =\u003e {\n    data.append('file' + index, file);\n  });\n\n  fetch('/upload', {\n    method: 'POST',\n    body: data\n  });\n}\n```\n\nAdditionally, if `onDropArrayBuffer` or `onDropDataURI` props are specified, the file will be read as `ArrayBuffer` and/or data URIs, and then passed to the corresponding handlers.\n\nIn addition to ES5 build, we also provide ES6, UMD, and SystemJS builds under [`dist`](https://github.com/compulim/react-drop-to-upload/tree/master/dist) folder. We support ES6 build thru `jsnext:main` in `package.json`.\n\n## Supported props\n\nFollowings are list of props supported by the component.\n\n| Name                                       | Supported types                    | Default | Description                                                                                                  |\n| ------------------------------------------ | ---------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |\n| `className`                                | String                             |         | Class name to apply                                                                                          |\n| `dropEffect`                               | `copy`, `link`, `move`, or `none`  |         | Drop effect to show when `onDragOver` is emitted                                                             |\n| `element`                                  | String or React element            | `\"div\"`   | Component type of the dropping element                                                                       |\n| `id`                                       | String                             |         | HTML ID of the element                                                                                       |\n| `onDrop(File[])`                           | Function                           |         | Handler to call when a file is dropped                                                                       |\n| `onDropArrayBuffer(ArrayBuffer[], File[])` | Function                           |         | Handler to call when a file is dropped and read as `ArrayBuffer`                                             |\n| `onDropDataURI(string[], File[])`          | Function                           |         | Handler to call when a file is dropped and read as [Data URI](https://en.wikipedia.org/wiki/Data_URI_scheme) |\n| `onLeave`                                  | Function                           |         | Handler to call when a cursor has left without dropping anything, i.e. `onDragLeave`                         |\n| `onOver`                                   | Function                           |         | Handler to call when a cursor is over with droppable item, i.e. `onDragOver`                                 |\n| `style`                                    | Map                                |         | Inline style                                                                                                 |\n\n### Points to note\n\n* If visualization is given when `onOver` is called, the visualization should be removed when either `onDrop` or `onLeave` is called. This is because `onLeave` will not be called when the user did drop the file\n* If `onDropArrayBuffer` is not specified, the component will not issue any I/O operations to read the file content. This also applies to `onDropDataURI`\n* If both `onDropArrayBuffer` and `onDropDataURI` are specified, it will read the file twice by calling `FileReader.readAsArrayBuffer` and `FileReader.readAsDataURL` simultaneously\n\n## Sample code\n\n```jsx\nimport React, { Component } from 'react';\nimport DropToUpload from 'react-drop-to-upload';\n\nclass Page extends Component {\n  constructor(props) {\n    super(props);\n\n    this.handleDrop = this.handleDrop.bind(this);\n    this.handleDropArrayBuffer = this.handleDropArrayBuffer.bind(this);\n    this.handleDropDataURI = this.handleDropDataURI.bind(this);\n  }\n\n  handleDrop(files) {\n    console.log(files.length \u003e 0); // true\n    console.log(files[0] instanceof File); // true\n  }\n\n  handleDropArrayBuffer(arrayBuffers, files) {\n    console.log(files.length \u003e 0); // true\n    console.log(files.length === arrayBuffers.length); // true\n    console.log(files[0] instanceof File); // true\n    console.log(arrayBuffers[0] instanceof ArrayBuffer); // true\n  }\n\n  handleDropDataURI(dataURIs, files) {\n    console.log(files.length \u003e 0); // true\n    console.log(files.length === dataURIs.length); // true\n    console.log(files[0] instanceof File); // true\n    console.log(typeof dataURIs[0] === 'string'); // true\n    console.log(/^data:(.*);(.*),/.test(dataURIs[0])); // true\n  }\n\n  render() {\n    return (\n      \u003cDropToUpload\n        onDrop={ this.handleDrop }\n        onDropArrayBuffer={ this.handleDropArrayBuffer }\n        onDropDataURI={ this.handleDropDataURI }\n      \u003e\n        Drop file here to upload\n      \u003c/DropToUpload\u003e\n    );\n  }\n}\n```\n\n\u003e You can find our testbed repository [here](https://github.com/compulim/react-drop-to-upload-testbed).\n\n## Changelog\n\nYou can find the changelog [here](CHANGELOG.md).\n\n## Contributions\n\nLike us? Please star our [NPM package](https://npmjs.com/react-drop-to-upload) and [GitHub repository](https://github.com/compulim/react-drop-to-upload).\n\nDon't feel quite right? Please [file a wish or an issue](https://github.com/compulim/react-drop-to-upload/issues) to us.\n\nWant to give us a hand? Please look at our [issue list](https://github.com/compulim/react-drop-to-upload/issues) and submit pull requests.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcompulim%2Freact-drop-to-upload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcompulim%2Freact-drop-to-upload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcompulim%2Freact-drop-to-upload/lists"}