{"id":19669998,"url":"https://github.com/sarink/react-file-drop","last_synced_at":"2025-04-12T19:48:14.962Z","repository":{"id":1210083,"uuid":"40773021","full_name":"sarink/react-file-drop","owner":"sarink","description":" React component for Gmail or Facebook -like drag and drop file uploader","archived":false,"fork":false,"pushed_at":"2024-04-07T08:39:07.000Z","size":1618,"stargazers_count":176,"open_issues_count":3,"forks_count":54,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-12T19:48:12.472Z","etag":null,"topics":["drag","drag-and-drop","facebook","file-upload","gmail","react","typescript"],"latest_commit_sha":null,"homepage":"https://www.sarink.net","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sarink.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"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":"2015-08-15T17:07:43.000Z","updated_at":"2025-02-04T13:12:31.000Z","dependencies_parsed_at":"2024-06-18T12:36:37.643Z","dependency_job_id":"83a49235-9b8c-4936-9094-104612e97bbd","html_url":"https://github.com/sarink/react-file-drop","commit_stats":{"total_commits":171,"total_committers":27,"mean_commits":6.333333333333333,"dds":0.3099415204678363,"last_synced_commit":"ddd8493a9fcde67fea41a7b9f77e5f9983dae9ad"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sarink%2Freact-file-drop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sarink%2Freact-file-drop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sarink%2Freact-file-drop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sarink%2Freact-file-drop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sarink","download_url":"https://codeload.github.com/sarink/react-file-drop/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248625498,"owners_count":21135513,"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","drag-and-drop","facebook","file-upload","gmail","react","typescript"],"created_at":"2024-11-11T17:03:39.149Z","updated_at":"2025-04-12T19:48:14.928Z","avatar_url":"https://github.com/sarink.png","language":"TypeScript","readme":"# react-file-drop\n\nZero dependency React component for Gmail or Facebook -like drag and drop file uploader. Drag files anywhere onto the window (or user defined 'frame' prop)! Very extensible, provides a hook for every event so you can use it to develop any custom behavior that you want.\n\n### V3 is out! See the [changelog](https://github.com/sarink/react-file-drop/blob/master/CHANGELOG.md)\n\n## Demo\n\nhttps://sarink.github.io/react-file-drop - A very simple live demo with example code and sample CSS\n\n## Why?\n\nI wanted that behavior that facebook, gmail, etc. have where a part of the page highlights immediately when you start dragging a file anywhere on the window. I couldn't find any React component that already did this, so, I made one!\n\n## Dependencies\n\nNone! (well, just `prop-types`, but that should already be removed from your prod bundle anyway)\n\n## Browser support\n\n✅ Chrome \u003cbr/\u003e\n✅ Firefox \u003cbr/\u003e\n✅ Safari \u003cbr/\u003e\n✅ IE 11 \u003cbr/\u003e\n✅ IE Edge \u003cbr/\u003e\n\n## Installation\n\n`npm install --save react-file-drop`\n\n## Usage\n\n`import { FileDrop } from 'react-file-drop'`\n\n## How it works\n\nFirst, you define the `frame` prop (default is the `document`), whenever the user begins dragging file(s) anywhere over this frame, the `target` will get a `file-drop-dragging-over-frame` class name, and the `onFrameDragEnter` callback will fire.\n\nNext, define an `onDrop` prop, whenever a user drops their files onto the `target`, this callback will be triggered.\n\nLastly, you'll need to style it.\n\nYou can also define an `onTargetClick` prop if you want to let user browse their files from disk. Below you can find instruction how to do that.\n\n## Styling\n\nBy default, the component comes with no styles. You can grab the [demo CSS](https://raw.githubusercontent.com/sarink/react-file-drop/master/demo/src/Demo.css) to get started.\n\nFor custom class names (if you're using something like JSS) you can use the following props:\n\n- `className`\n- `targetClassName`\n- `draggingOverFrameClassName`\n- `draggingOverTargetClassName`\n\n## Classnames\n\n`.file-drop`: The outer container element\n\n`.file-drop \u003e .file-drop-target`: This is the target the user has to drag their files to.\n\n`.file-drop \u003e .file-drop-target.file-drop-dragging-over-frame`: This class will be added to the `target` whenever the user begins dragging a file over the `frame`, and it will be removed when they leave\n\n`.file-drop \u003e .file-drop-target.file-drop-dragging-over-target`: This class will be added to the `target` whenever the user begins dragging a file over the `target`, and it will be removed when they leave\n\n## Props\n\n`onDrop: function(files, event)`: Callback when the user drops files onto the target\n\n`onDragOver: function(event)`: Callback when the user is dragging over the target. Also adds the `file-drop-dragging-over-target` class to the `file-drop-target`.\n\n`onDragLeave: function(event)`: Callback when the user leaves the target. Removes the `file-drop-dragging-over-target` class from the `file-drop-target`.\n\n`onTargetClick: function(event)`: Callback when the user clicks _anywhere_ on the target.\n\n`dropEffect - string \"copy\" || \"move\" || \"link\" || \"none\" (default: \"copy\")`: Learn more about [HTML5 dropEffects](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer#dropEffect.28.29). Not available in IE :(\n\n`frame: document || HTMLElement (default: document)`: This is the scope or \"frame\" that the user must drag some file(s) over to kick things off.\n\n`onFrameDragEnter: function(event)`: Callback when the user begins dragging over the `frame`.\n\n`onFrameDragLeave: function(event)`: Callback when the user stops dragging over the `frame`.\n\n`onFrameDrop: function(event)`: Callback when the user drops files _anywhere_ over the `frame`.\n\n`className: string (default: \"file-drop\")`: Class given to the outer container div.\n\n`targetClassName: string (default: \"file-drop-target\")`: Class given to the target div.\n\n`draggingOverFrameClassName: string (default: \"file-drop-dragging-over-frame\")`: Class given to the target div when file is being dragged over frame.\n\n`draggingOverTargetClassName: string (default: \"file-drop-dragging-over-target\")`: Class given to the target div when file is being dragged over target.\n\n## Uploading files using click handler\n\nIn order to let user upload files with click on the `file-drop-target`, you will need to specify an `input[type=\"file\"]` somewhere in your code. You will also need a ref, that will be passed to the input, to call a `click` method on it.\n\nSteps:\n\n1. Define ref for input:\n\n```javascript\nconst fileInputRef = useRef(null);\n```\n\n2. Define input change handler:\n\n```javascript\nconst onFileInputChange = (event) =\u003e {\n  const { files } = event.target;\n  // do something with your files...\n}\n```\n\n3. Add input to your code:\n\n```html\n\u003cinput\n  onChange={onFileInputChange}\n  ref={fileInputRef}\n  type=\"file\"\n  className=\"hidden\"\n/\u003e\n```\n\n4. Define target click handler:\n\n```javascript\nconst onTargetClick = () =\u003e {\n  fileInputRef.current.click()\n}\n```\n\n5. Add target click handler to `FileDrop` component:\n\n```html\n\u003cFileDrop\n  onTargetClick={onTargetClick}\n```\n\n## Contributing\n\nYour PRs are welcome! To run the app locally:\n\n```\nnvm use # Probably optional, but it can't hurt\n\ncd file-drop\nnpm install\nnpm start\n\ncd demo\nnpm install\nnpm start\n```\n\nNow both the apps are running in watch mode. If you make a change to the file-drop code, you should see the demo code automatically rebuild and update in your browser.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsarink%2Freact-file-drop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsarink%2Freact-file-drop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsarink%2Freact-file-drop/lists"}