{"id":26690755,"url":"https://github.com/okonet/react-dropzone","last_synced_at":"2025-03-26T16:01:02.991Z","repository":{"id":21217492,"uuid":"24530655","full_name":"react-dropzone/react-dropzone","owner":"react-dropzone","description":"Simple HTML5 drag-drop zone with React.js.","archived":false,"fork":false,"pushed_at":"2025-02-24T10:59:35.000Z","size":4381,"stargazers_count":10738,"open_issues_count":61,"forks_count":797,"subscribers_count":60,"default_branch":"master","last_synced_at":"2025-03-23T16:24:03.620Z","etag":null,"topics":["drag-and-drop","file","file-upload","react"],"latest_commit_sha":null,"homepage":"https://react-dropzone.js.org/","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/react-dropzone.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},"funding":{"open_collective":"react-dropzone"}},"created_at":"2014-09-27T11:57:09.000Z","updated_at":"2025-03-22T22:50:17.000Z","dependencies_parsed_at":"2023-09-29T07:24:47.472Z","dependency_job_id":"f26008af-04ab-49a7-9d16-a4b0ccaa6bcb","html_url":"https://github.com/react-dropzone/react-dropzone","commit_stats":{"total_commits":525,"total_committers":193,"mean_commits":"2.7202072538860103","dds":0.7885714285714286,"last_synced_commit":"c36ab5bd8b8fd74e2074290d80e3ecb93d26b014"},"previous_names":["okonet/react-dropzone","paramaggarwal/react-dropzone"],"tags_count":193,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-dropzone%2Freact-dropzone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-dropzone%2Freact-dropzone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-dropzone%2Freact-dropzone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-dropzone%2Freact-dropzone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-dropzone","download_url":"https://codeload.github.com/react-dropzone/react-dropzone/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245689494,"owners_count":20656416,"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":["drag-and-drop","file","file-upload","react"],"created_at":"2025-03-26T16:00:31.252Z","updated_at":"2025-03-26T16:01:02.983Z","avatar_url":"https://github.com/react-dropzone.png","language":"JavaScript","readme":"![react-dropzone logo](https://raw.githubusercontent.com/react-dropzone/react-dropzone/master/logo/logo.png)\n\n# react-dropzone\n[![npm](https://img.shields.io/npm/v/react-dropzone.svg?style=flat-square)](https://www.npmjs.com/package/react-dropzone)\n![Tests](https://img.shields.io/github/actions/workflow/status/react-dropzone/react-dropzone/test.yml?branch=master\u0026style=flat-square\u0026label=tests)\n[![codecov](https://img.shields.io/codecov/c/gh/react-dropzone/react-dropzone/master.svg?style=flat-square)](https://codecov.io/gh/react-dropzone/react-dropzone)\n[![Open Collective Backers](https://img.shields.io/opencollective/backers/react-dropzone.svg?style=flat-square)](#backers)\n[![Open Collective Sponsors](https://img.shields.io/opencollective/sponsors/react-dropzone.svg?style=flat-square)](#sponsors)\n[![Gitpod](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod\u0026style=flat-square)](https://gitpod.io/#https://github.com/react-dropzone/react-dropzone)\n[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg?style=flat-square)](https://github.com/react-dropzone/.github/blob/main/CODE_OF_CONDUCT.md)\n\nSimple React hook to create a HTML5-compliant drag'n'drop zone for files.\n\nDocumentation and examples at https://react-dropzone.js.org. Source code at https://github.com/react-dropzone/react-dropzone/.\n\n\n## Installation\nInstall it from npm and include it in your React build process (using [Webpack](http://webpack.github.io/), [Browserify](http://browserify.org/), etc).\n\n```bash\nnpm install --save react-dropzone\n```\nor:\n```bash\nyarn add react-dropzone\n```\n\n\n## Usage\nYou can either use the hook:\n\n```jsx static\nimport React, {useCallback} from 'react'\nimport {useDropzone} from 'react-dropzone'\n\nfunction MyDropzone() {\n  const onDrop = useCallback(acceptedFiles =\u003e {\n    // Do something with the files\n  }, [])\n  const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop})\n\n  return (\n    \u003cdiv {...getRootProps()}\u003e\n      \u003cinput {...getInputProps()} /\u003e\n      {\n        isDragActive ?\n          \u003cp\u003eDrop the files here ...\u003c/p\u003e :\n          \u003cp\u003eDrag 'n' drop some files here, or click to select files\u003c/p\u003e\n      }\n    \u003c/div\u003e\n  )\n}\n```\n\nOr the wrapper component for the hook:\n```jsx static\nimport React from 'react'\nimport Dropzone from 'react-dropzone'\n\n\u003cDropzone onDrop={acceptedFiles =\u003e console.log(acceptedFiles)}\u003e\n  {({getRootProps, getInputProps}) =\u003e (\n    \u003csection\u003e\n      \u003cdiv {...getRootProps()}\u003e\n        \u003cinput {...getInputProps()} /\u003e\n        \u003cp\u003eDrag 'n' drop some files here, or click to select files\u003c/p\u003e\n      \u003c/div\u003e\n    \u003c/section\u003e\n  )}\n\u003c/Dropzone\u003e\n```\n\nIf you want to access file contents you have to use the [FileReader API](https://developer.mozilla.org/en-US/docs/Web/API/FileReader):\n\n```jsx static\nimport React, {useCallback} from 'react'\nimport {useDropzone} from 'react-dropzone'\n\nfunction MyDropzone() {\n  const onDrop = useCallback((acceptedFiles) =\u003e {\n    acceptedFiles.forEach((file) =\u003e {\n      const reader = new FileReader()\n\n      reader.onabort = () =\u003e console.log('file reading was aborted')\n      reader.onerror = () =\u003e console.log('file reading has failed')\n      reader.onload = () =\u003e {\n      // Do whatever you want with the file contents\n        const binaryStr = reader.result\n        console.log(binaryStr)\n      }\n      reader.readAsArrayBuffer(file)\n    })\n    \n  }, [])\n  const {getRootProps, getInputProps} = useDropzone({onDrop})\n\n  return (\n    \u003cdiv {...getRootProps()}\u003e\n      \u003cinput {...getInputProps()} /\u003e\n      \u003cp\u003eDrag 'n' drop some files here, or click to select files\u003c/p\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n\n## Dropzone Props Getters\nThe dropzone property getters are just two functions that return objects with properties which you need to use to create the drag 'n' drop zone.\nThe root properties can be applied to whatever element you want, whereas the input properties must be applied to an `\u003cinput\u003e`:\n```jsx static\nimport React from 'react'\nimport {useDropzone} from 'react-dropzone'\n\nfunction MyDropzone() {\n  const {getRootProps, getInputProps} = useDropzone()\n\n  return (\n    \u003cdiv {...getRootProps()}\u003e\n      \u003cinput {...getInputProps()} /\u003e\n      \u003cp\u003eDrag 'n' drop some files here, or click to select files\u003c/p\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\nNote that whatever other props you want to add to the element where the props from `getRootProps()` are set, you should always pass them through that function rather than applying them on the element itself.\nThis is in order to avoid your props being overridden (or overriding the props returned by `getRootProps()`):\n```jsx static\n\u003cdiv\n  {...getRootProps({\n    onClick: event =\u003e console.log(event),\n    role: 'button',\n    'aria-label': 'drag and drop area',\n    ...\n  })}\n/\u003e\n```\n\nIn the example above, the provided `{onClick}` handler will be invoked before the internal one, therefore, internal callbacks can be prevented by simply using [stopPropagation](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation).\nSee [Events](https://react-dropzone.js.org#events) for more examples.\n\n*Important*: if you omit rendering an `\u003cinput\u003e` and/or binding the props from `getInputProps()`, opening a file dialog will not be possible.\n\n## Refs\nBoth `getRootProps` and `getInputProps` accept a custom `refKey` (defaults to `ref`) as one of the attributes passed down in the parameter.\n\nThis can be useful when the element you're trying to apply the props from either one of those fns does not expose a reference to the element, e.g:\n\n```jsx static\nimport React from 'react'\nimport {useDropzone} from 'react-dropzone'\n// NOTE: After v4.0.0, styled components exposes a ref using forwardRef,\n// therefore, no need for using innerRef as refKey\nimport styled from 'styled-components'\n\nconst StyledDiv = styled.div`\n  // Some styling here\n`\nfunction Example() {\n  const {getRootProps, getInputProps} = useDropzone()\n  \u003cStyledDiv {...getRootProps({ refKey: 'innerRef' })}\u003e\n    \u003cinput {...getInputProps()} /\u003e\n    \u003cp\u003eDrag 'n' drop some files here, or click to select files\u003c/p\u003e\n  \u003c/StyledDiv\u003e\n}\n```\n\nIf you're working with [Material UI v4](https://v4.mui.com/) and would like to apply the root props on some component that does not expose a ref, use [RootRef](https://v4.mui.com/api/root-ref/):\n\n```jsx static\nimport React from 'react'\nimport {useDropzone} from 'react-dropzone'\nimport RootRef from '@material-ui/core/RootRef'\n\nfunction PaperDropzone() {\n  const {getRootProps, getInputProps} = useDropzone()\n  const {ref, ...rootProps} = getRootProps()\n\n  \u003cRootRef rootRef={ref}\u003e\n    \u003cPaper {...rootProps}\u003e\n      \u003cinput {...getInputProps()} /\u003e\n      \u003cp\u003eDrag 'n' drop some files here, or click to select files\u003c/p\u003e\n    \u003c/Paper\u003e\n  \u003c/RootRef\u003e\n}\n```\n\n**IMPORTANT**: do not set the `ref` prop on the elements where `getRootProps()`/`getInputProps()` props are set, instead, get the refs from the hook itself:\n\n```jsx static\nimport React from 'react'\nimport {useDropzone} from 'react-dropzone'\n\nfunction Refs() {\n  const {\n    getRootProps,\n    getInputProps,\n    rootRef, // Ref to the `\u003cdiv\u003e`\n    inputRef // Ref to the `\u003cinput\u003e`\n  } = useDropzone()\n  \u003cdiv {...getRootProps()}\u003e\n    \u003cinput {...getInputProps()} /\u003e\n    \u003cp\u003eDrag 'n' drop some files here, or click to select files\u003c/p\u003e\n  \u003c/div\u003e\n}\n```\n\nIf you're using the `\u003cDropzone\u003e` component, though, you can set the `ref` prop on the component itself which will expose the `{open}` prop that can be used to open the file dialog programmatically:\n\n```jsx static\nimport React, {createRef} from 'react'\nimport Dropzone from 'react-dropzone'\n\nconst dropzoneRef = createRef()\n\n\u003cDropzone ref={dropzoneRef}\u003e\n  {({getRootProps, getInputProps}) =\u003e (\n    \u003cdiv {...getRootProps()}\u003e\n      \u003cinput {...getInputProps()} /\u003e\n      \u003cp\u003eDrag 'n' drop some files here, or click to select files\u003c/p\u003e\n    \u003c/div\u003e\n  )}\n\u003c/Dropzone\u003e\n\ndropzoneRef.open()\n```\n\n\n## Testing\n`react-dropzone` makes some of its drag 'n' drop callbacks asynchronous to enable promise based `getFilesFromEvent()` functions. In order to test components that use this library, you need to use the [react-testing-library](https://github.com/testing-library/react-testing-library):\n```js static\nimport React from 'react'\nimport Dropzone from 'react-dropzone'\nimport {act, fireEvent, render} from '@testing-library/react'\n\ntest('invoke onDragEnter when dragenter event occurs', async () =\u003e {\n  const file = new File([\n    JSON.stringify({ping: true})\n  ], 'ping.json', { type: 'application/json' })\n  const data = mockData([file])\n  const onDragEnter = jest.fn()\n\n  const ui = (\n    \u003cDropzone onDragEnter={onDragEnter}\u003e\n      {({ getRootProps, getInputProps }) =\u003e (\n        \u003cdiv {...getRootProps()}\u003e\n          \u003cinput {...getInputProps()} /\u003e\n        \u003c/div\u003e\n      )}\n    \u003c/Dropzone\u003e\n  )\n  const { container } = render(ui)\n\n  await act(\n    () =\u003e fireEvent.dragEnter(\n      container.querySelector('div'),\n      data,\n    )\n  );\n  expect(onDragEnter).toHaveBeenCalled()\n})\n\nfunction mockData(files) {\n  return {\n    dataTransfer: {\n      files,\n      items: files.map(file =\u003e ({\n        kind: 'file',\n        type: file.type,\n        getAsFile: () =\u003e file\n      })),\n      types: ['Files']\n    }\n  }\n}\n```\n\n**NOTE**: using [Enzyme](https://airbnb.io/enzyme) for testing is not supported at the moment, see [#2011](https://github.com/airbnb/enzyme/issues/2011).\n\nMore examples for this can be found in `react-dropzone`'s own [test suites](https://github.com/react-dropzone/react-dropzone/blob/master/src/index.spec.js).\n\n## Caveats\n### Required React Version\nReact [16.8](https://reactjs.org/blog/2019/02/06/react-v16.8.0.html) or above is required because we use [hooks](https://reactjs.org/docs/hooks-intro.html) (the lib itself is a hook).\n\n### File Paths\nFiles returned by the hook or passed as arg to the `onDrop` cb won't have the properties `path` or `fullPath`.\nFor more inf check [this SO question](https://stackoverflow.com/a/23005925/2275818) and [this issue](https://github.com/react-dropzone/react-dropzone/issues/477).\n\n### Not a File Uploader\nThis lib is not a file uploader; as such, it does not process files or provide any way to make HTTP requests to some server; if you're looking for that, checkout [filepond](https://pqina.nl/filepond) or [uppy.io](https://uppy.io/).\n\n### Using \\\u003clabel\\\u003e as Root\nIf you use [\\\u003clabel\\\u003e](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) as the root element, the file dialog will be opened twice; see [#1107](https://github.com/react-dropzone/react-dropzone/issues/1107) why. To avoid this, use `noClick`:\n```jsx static\nimport React, {useCallback} from 'react'\nimport {useDropzone} from 'react-dropzone'\n\nfunction MyDropzone() {\n  const {getRootProps, getInputProps} = useDropzone({noClick: true})\n\n  return (\n    \u003clabel {...getRootProps()}\u003e\n      \u003cinput {...getInputProps()} /\u003e\n    \u003c/label\u003e\n  )\n}\n```\n\n### Using open() on Click\nIf you bind a click event on an inner element and use `open()`, it will trigger a click on the root element too, resulting in the file dialog opening twice. To prevent this, use the `noClick` on the root:\n```jsx static\nimport React, {useCallback} from 'react'\nimport {useDropzone} from 'react-dropzone'\n\nfunction MyDropzone() {\n  const {getRootProps, getInputProps, open} = useDropzone({noClick: true})\n\n  return (\n    \u003cdiv {...getRootProps()}\u003e\n      \u003cinput {...getInputProps()} /\u003e\n      \u003cbutton type=\"button\" onClick={open}\u003e\n        Open\n      \u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n### File Dialog Cancel Callback\nThe `onFileDialogCancel()` cb is unstable in most browsers, meaning, there's a good chance of it being triggered even though you have selected files.\n\nWe rely on using a timeout of `300ms` after the window is focused (the window `onfocus` event is triggered when the file select dialog is closed) to check if any files were selected and trigger `onFileDialogCancel` if none were selected.\n\nAs one can imagine, this doesn't really work if there's a lot of files or large files as by the time we trigger the check, the browser is still processing the files and no `onchange` events are triggered yet on the input. Check [#1031](https://github.com/react-dropzone/react-dropzone/issues/1031) for more info.\n\nFortunately, there's the [File System Access API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API), which is currently a working draft and some browsers support it (see [browser compatibility](https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker#browser_compatibility)), that provides a reliable way to prompt the user for file selection and capture cancellation. \n\nAlso keep in mind that the FS access API can only be used in [secure contexts](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts).\n\n**NOTE** You can enable using the FS access API with the `useFsAccessApi` property: `useDropzone({useFsAccessApi: true})`.\n\n### File System Access API\n\nWhen setting `useFsAccessApi` to `true`, you're switching to the [File System API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) (see the [file system access](https://wicg.github.io/file-system-access/) RFC).\n\nWhat this essentially does is that it will use the [showOpenFilePicker](https://developer.mozilla.org/en-US/docs/Web/API/Window/showOpenFilePicker) method to open the file picker window so that the user can select files.\n\nIn contrast, the traditional way (when the `useFsAccessApi` is not set to `true` or not specified) uses an `\u003cinput type=\"file\"\u003e` (see [docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file)) on which a click event is triggered.\n\nWith the use of the file system access API enabled, there's a couple of caveats to keep in mind:\n1. The users will not be able to select directories\n2. It requires the app to run in a [secure context](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts)\n3. In [Electron](https://www.electronjs.org/), the path may not be set (see [#1249](https://github.com/react-dropzone/react-dropzone/issues/1249))\n\n## Supported Browsers\nWe use [browserslist](https://github.com/browserslist/browserslist) config to state the browser support for this lib, so check it out on [browserslist.dev](https://browserslist.dev/?q=ZGVmYXVsdHM%3D).\n\n\n## Need image editing?\nReact Dropzone integrates perfectly with [Pintura Image Editor](https://pqina.nl/pintura/?ref=react-dropzone), creating a modern image editing experience. Pintura supports crop aspect ratios, resizing, rotating, cropping, annotating, filtering, and much more.\n\nCheckout the [Pintura integration example](https://codesandbox.io/s/react-dropzone-pintura-40xh4?file=/src/App.js).\n\n\n## Support\n\n### Backers\nSupport us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/react-dropzone#backer)]\n\n\u003ca href=\"https://opencollective.com/react-dropzone/backer/0/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/backer/0/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/backer/1/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/backer/1/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/backer/2/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/backer/2/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/backer/3/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/backer/3/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/backer/4/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/backer/4/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/backer/5/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/backer/5/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/backer/6/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/backer/6/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/backer/7/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/backer/7/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/backer/8/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/backer/8/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/backer/9/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/backer/9/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/backer/10/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/backer/10/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/backer/11/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/backer/11/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/backer/12/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/backer/12/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/backer/13/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/backer/13/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/backer/14/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/backer/14/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/backer/15/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/backer/15/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/backer/16/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/backer/16/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/backer/17/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/backer/17/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/backer/18/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/backer/18/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/backer/19/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/backer/19/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/backer/20/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/backer/20/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/backer/21/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/backer/21/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/backer/22/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/backer/22/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/backer/23/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/backer/23/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/backer/24/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/backer/24/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/backer/25/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/backer/25/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/backer/26/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/backer/26/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/backer/27/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/backer/27/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/backer/28/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/backer/28/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/backer/29/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/backer/29/avatar.svg\"\u003e\u003c/a\u003e\n\n\n### Sponsors\nBecome a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor](https://opencollective.com/react-dropzone#sponsor)]\n\n\u003ca href=\"https://opencollective.com/react-dropzone/sponsor/0/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/sponsor/0/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/sponsor/1/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/sponsor/1/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/sponsor/2/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/sponsor/2/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/sponsor/3/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/sponsor/3/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/sponsor/4/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/sponsor/4/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/sponsor/5/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/sponsor/5/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/sponsor/6/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/sponsor/6/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/sponsor/7/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/sponsor/7/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/sponsor/8/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/sponsor/8/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/sponsor/9/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/sponsor/9/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/sponsor/10/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/sponsor/10/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/sponsor/11/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/sponsor/11/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/sponsor/12/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/sponsor/12/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/sponsor/13/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/sponsor/13/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/sponsor/14/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/sponsor/14/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/sponsor/15/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/sponsor/15/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/sponsor/16/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/sponsor/16/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/sponsor/17/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/sponsor/17/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/sponsor/18/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/sponsor/18/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/sponsor/19/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/sponsor/19/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/sponsor/20/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/sponsor/20/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/sponsor/21/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/sponsor/21/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/sponsor/22/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/sponsor/22/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/sponsor/23/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/sponsor/23/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/sponsor/24/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/sponsor/24/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/sponsor/25/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/sponsor/25/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/sponsor/26/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/sponsor/26/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/sponsor/27/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/sponsor/27/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/sponsor/28/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/sponsor/28/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-dropzone/sponsor/29/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-dropzone/sponsor/29/avatar.svg\"\u003e\u003c/a\u003e\n\n\n### Hosting\n[react-dropzone.js.org](https://react-dropzone.js.org/) hosting provided by [netlify](https://www.netlify.com/).\n\n## Contribute\nCheckout the organization [CONTRIBUTING.md](https://github.com/react-dropzone/.github/blob/main/CONTRIBUTING.md).\n\n## License\nMIT\n","funding_links":["https://opencollective.com/react-dropzone","https://opencollective.com/react-dropzone/backer/0/website","https://opencollective.com/react-dropzone/backer/1/website","https://opencollective.com/react-dropzone/backer/2/website","https://opencollective.com/react-dropzone/backer/3/website","https://opencollective.com/react-dropzone/backer/4/website","https://opencollective.com/react-dropzone/backer/5/website","https://opencollective.com/react-dropzone/backer/6/website","https://opencollective.com/react-dropzone/backer/7/website","https://opencollective.com/react-dropzone/backer/8/website","https://opencollective.com/react-dropzone/backer/9/website","https://opencollective.com/react-dropzone/backer/10/website","https://opencollective.com/react-dropzone/backer/11/website","https://opencollective.com/react-dropzone/backer/12/website","https://opencollective.com/react-dropzone/backer/13/website","https://opencollective.com/react-dropzone/backer/14/website","https://opencollective.com/react-dropzone/backer/15/website","https://opencollective.com/react-dropzone/backer/16/website","https://opencollective.com/react-dropzone/backer/17/website","https://opencollective.com/react-dropzone/backer/18/website","https://opencollective.com/react-dropzone/backer/19/website","https://opencollective.com/react-dropzone/backer/20/website","https://opencollective.com/react-dropzone/backer/21/website","https://opencollective.com/react-dropzone/backer/22/website","https://opencollective.com/react-dropzone/backer/23/website","https://opencollective.com/react-dropzone/backer/24/website","https://opencollective.com/react-dropzone/backer/25/website","https://opencollective.com/react-dropzone/backer/26/website","https://opencollective.com/react-dropzone/backer/27/website","https://opencollective.com/react-dropzone/backer/28/website","https://opencollective.com/react-dropzone/backer/29/website"],"categories":["UI Components","Uncategorized","\u003csummary\u003eUI Components\u003c/summary\u003e","Demos"],"sub_categories":["Form Components","Uncategorized","Device Input/User Action"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fokonet%2Freact-dropzone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fokonet%2Freact-dropzone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fokonet%2Freact-dropzone/lists"}