{"id":19568327,"url":"https://github.com/karimmokhtar/react-drag-drop-files","last_synced_at":"2025-05-14T17:03:55.678Z","repository":{"id":38318183,"uuid":"378442339","full_name":"KarimMokhtar/react-drag-drop-files","owner":"KarimMokhtar","description":"Light and simple Reactjs drag and drop files library to use with very flexible options to change, so you put whatever the design you want for your drop-area. Users can drag and drop or even select the file anywhere in the window.","archived":false,"fork":false,"pushed_at":"2025-04-01T12:29:30.000Z","size":1450,"stargazers_count":259,"open_issues_count":37,"forks_count":102,"subscribers_count":1,"default_branch":"dev","last_synced_at":"2025-04-13T01:59:21.283Z","etag":null,"topics":["drag","drag-and-drop","drop","file","file-upload","react","react-drag-and-drop","react-drag-and-drop-file","react-drag-and-drop-files","react-drag-drop-file","react-drag-drop-files","react-draggable","styled-components"],"latest_commit_sha":null,"homepage":"","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/KarimMokhtar.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,"zenodo":null}},"created_at":"2021-06-19T15:18:31.000Z","updated_at":"2025-04-10T11:58:06.000Z","dependencies_parsed_at":"2025-04-10T16:06:23.408Z","dependency_job_id":"acbd9253-543f-4163-980c-5fbdfa87cdd9","html_url":"https://github.com/KarimMokhtar/react-drag-drop-files","commit_stats":{"total_commits":103,"total_committers":23,"mean_commits":4.478260869565218,"dds":"0.33009708737864074","last_synced_commit":"07573bbb152b25154fc0f14a0113b8996030bdba"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KarimMokhtar%2Freact-drag-drop-files","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KarimMokhtar%2Freact-drag-drop-files/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KarimMokhtar%2Freact-drag-drop-files/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KarimMokhtar%2Freact-drag-drop-files/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KarimMokhtar","download_url":"https://codeload.github.com/KarimMokhtar/react-drag-drop-files/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248654046,"owners_count":21140235,"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","drop","file","file-upload","react","react-drag-and-drop","react-drag-and-drop-file","react-drag-and-drop-files","react-drag-drop-file","react-drag-drop-files","react-draggable","styled-components"],"created_at":"2024-11-11T06:03:31.931Z","updated_at":"2025-04-13T01:59:29.155Z","avatar_url":"https://github.com/KarimMokhtar.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Drag and Drop Files\n\n[![Version](http://img.shields.io/npm/v/react-drag-drop-files.svg)](https://www.npmjs.org/package/react-drag-drop-files) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier) [![npm download][download-image]][download-url]\n\n[download-image]: https://img.shields.io/npm/dm/react-drag-drop-files.svg?style=flat-square\n[download-url]: https://npmjs.org/package/react-drag-drop-files\n\nLight and simple reactjs drag and drop files library to use with very flexible options to change, so you put whatever the design you want for your drop-area. Users can drag and drop or even select the file anywhere in the window.\n\n## Demo\n\n[![Edit react-drag-drop-files](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-drag-drop-files-sghbp)\n\n## Installation\n\nInstall it from npm (using [NPM](http://webpack.github.io/)).\n\n```bash\nnpm i --save react-drag-drop-files\n```\n\nor:\n\n```bash\nyarn add react-drag-drop-files\n```\n\n## Usage\n\nUsing react hooks just as simple as:\n\n```jsx static\nimport React, { useState } from \"react\";\nimport { FileUploader } from \"react-drag-drop-files\";\n\nconst fileTypes = [\"JPG\", \"PNG\", \"GIF\"];\n\nfunction DragDrop() {\n  const [file, setFile] = useState(null);\n  const handleChange = (file) =\u003e {\n    setFile(file);\n  };\n  return (\n    \u003cFileUploader handleChange={handleChange} name=\"file\" types={fileTypes} /\u003e\n  );\n}\n\nexport default DragDrop;\n```\n\n## Options\n\n| Option                | Type                        | Description                                                                                                         | value example                                             |\n|-----------------------|-----------------------------|---------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------|\n| name                  | string                      | the name for your form (if exist)                                                                                   | `\"myFile\"`                                                |\n| multiple              | boolean                     | a boolean to determine whether the multiple files is enabled or not                                                 | `true OR false - false by default`                        |\n| label                 | string                      | the label (text) for your form (if exist) inside the uploading box - first word underlined                          | `\"Upload or drop a file right here\"`                      |\n| uploadedLabel         | string                      | the label (text) for your form (if exist) after a file was uploaded inside the uploading box                        | `\"Uploaded Successfully! Upload another?\"`                |\n| required              | boolean                     | Conditionally set the input field as required                                                                       | `true` or `false`                                         |\n| disabled              | boolean                     | this for disabled the input                                                                                         | `true OR false`                                           |\n| hoverTitle            | string                      | text appears(hover) when trying to drop a file                                                                      | `\"Drop here\"`                                             |\n| fileOrFiles           | Array\u003cFile\u003e or File or null | this mainly made because if you would like to remove uploaded file(s) pass null or pass another file as initial     |\n| classes               | string                      | string with the classes wished to add                                                                               | `\"drop_area drop_zone\"`                                   |\n| types                 | Array\u003cstrings\u003e              | array of strings with extensions to check and go throw                                                              | `['png', 'jpeg', ...]`                                    |\n| onTypeError           | function                    | function that will be called only of error occurred related to type                                                 | `(err) =\u003e console.log(err)`                               |\n| children              | JSX Element, any            | if you want to replace the current design inside the box of drop zone. (**it will remove the default exist style**) | `\u003cdiv\u003e\u003cp\u003ethis is inside drop area\u003c/p\u003e\u003c/div\u003e` or just text |\n| maxSize               | number                      | the maximum size of the file (number in mb)                                                                         | 2                                                         |\n| minSize               | number                      | the minimum size of the file (number in mb)                                                                         | 1                                                         |\n| onSizeError           | function                    | function that will be called only if error related to min or max size occurred                                      | `(file) =\u003e console.log(file)`                             |\n| onDrop                | function                    | function that will be called when the user drops file(s) on the drop area only                                      | `(file) =\u003e console.log(file)`                             |\n| onSelect              | function                    | function that will be called when the user selects file(s) on click the file area only                              | `(file) =\u003e console.log(file)`                             |\n| handleChange          | function                    | function that will be called when the user selects or drops file(s)                                                 | `(file) =\u003e console.log(file)`                             |\n| onDraggingStateChange | function                    | function that will be called with the state of dragging                                                             | `(dragging) =\u003e console.log(dragging)`                     |\n| dropMessageStyle      | CSS Properties              | A CSS property to style the hover message                                                                           | `{backgroundColor: 'red'}`                                |\n\n## How to contribute:\n  - Please follow the instructions inside this file: [here](CONTRIBUTION.md)\n\n### Upcoming...\n- [X] Contribution Guide\n- [X] Github actions\n\n## License\n\n[MIT](https://choosealicense.com/licenses/mit/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkarimmokhtar%2Freact-drag-drop-files","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkarimmokhtar%2Freact-drag-drop-files","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkarimmokhtar%2Freact-drag-drop-files/lists"}