{"id":22736745,"url":"https://github.com/mother/react-files","last_synced_at":"2025-04-04T18:09:15.040Z","repository":{"id":44800966,"uuid":"66410896","full_name":"mother/react-files","owner":"mother","description":"A file input (dropzone) management component for React","archived":false,"fork":false,"pushed_at":"2024-08-16T15:59:19.000Z","size":2199,"stargazers_count":151,"open_issues_count":8,"forks_count":35,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-28T17:07:56.059Z","etag":null,"topics":["drop","dropzone","file","files","image","react","upload"],"latest_commit_sha":null,"homepage":null,"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/mother.png","metadata":{"files":{"readme":"README.md","changelog":null,"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-08-23T23:23:07.000Z","updated_at":"2025-02-26T00:26:53.000Z","dependencies_parsed_at":"2024-06-18T13:42:22.938Z","dependency_job_id":"60b7c090-c0f6-4a24-bbf0-99487b6a9c5e","html_url":"https://github.com/mother/react-files","commit_stats":{"total_commits":92,"total_committers":7,"mean_commits":"13.142857142857142","dds":0.5652173913043479,"last_synced_commit":"5e5f9ad3c3b5d42e28538a27ec9161d28b4d149b"},"previous_names":[],"tags_count":37,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mother%2Freact-files","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mother%2Freact-files/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mother%2Freact-files/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mother%2Freact-files/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mother","download_url":"https://codeload.github.com/mother/react-files/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247226215,"owners_count":20904465,"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":["drop","dropzone","file","files","image","react","upload"],"created_at":"2024-12-10T22:06:53.287Z","updated_at":"2025-04-04T18:09:15.011Z","avatar_url":"https://github.com/mother.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"React Files\n=======================\n\nA minimal, zero dependency, file input (dropzone) component for React.\n\nIf upgrading from version 1 or 2, see the [Upgrading to Version 3](#upgrading-to-version-3) section below.\n\n![Alt text](/demo.gif?raw=true \"Demo\")\n\n## Installation\n\nInstall using npm or yarn. Requires React 16.8+.\n\n```bash\nnpm install react-files --save\n```\n\n## Basic Usage\n\n```js\nimport React from 'react'\nimport Files from 'react-files'\n\nconst FileDropzone = () =\u003e {\n  const handleChange = (files) =\u003e {\n    console.log(files)\n  }\n\n  const handleError = (error, file) =\u003e {\n    console.log('error code ' + error.code + ': ' + error.message)\n  }\n\n  return (\n    \u003cdiv className=\"files\"\u003e\n      \u003cFiles\n        className='files-dropzone'\n        onChange={handleChange}\n        onError={handleError}\n        accepts={['image/png', '.pdf', 'audio/*']}\n        multiple\n        maxFileSize={10000000}\n        minFileSize={0}\n        clickable\u003e\n        Drop files here or click to upload\n      \u003c/Files\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n## Upgrading to Version 3\n\nMost of the changes made to version 3 are internal, but there are some notable and breaking changes:\n1. The most significant change is that `react-files` no longer manages state internally to track files that have been uploaded to a file list. This can be achieved quite simply however - please refer to the [`ListWithUpload` example](https://github.com/mother/react-files/blob/master/examples/ListWithUpload.js).\n2. `dropActiveClassName` prop has been renamed to `dragActiveClassName`.\n2. Removed unnecessary parent/wrapper `div` element. No more default values for `className` or `dragActiveClassName` props.\n3. Ability to pass in a render prop with a prop that indicates whether a drag is in progress. See the [`RenderProps` example](https://github.com/mother/react-files/blob/master/examples/RenderProps.js).\n4. Ability to pass in attributes to underlying input\n\nFor a full list of changes, please checkout the [v3.0.0 release changelog](https://github.com/mother/react-files/releases/tag/v3.0.0) or the [corresponding pull request](https://github.com/mother/react-files/pull/32).\n\n## Props\n\n`onChange(files)` - *Function*\n\nPerform work on files added when submit is clicked.\n\n---\n\n`onError(error, file)` - *Function*\n  - `error.code` - Number\n  - `error.message` - String\n\nPerform work or notify the user when an error occurs.\n\nError codes are:\n1. Invalid file type\n2. File too large\n3. File too small\n4. Maximum file count reached\n\n---\n\n`accepts` - *Array* of *String*\n\nControl what types of generic/specific MIME types or file extensions can be dropped/added.\n\n\u003e See full list of MIME types here: http://www.iana.org/assignments/media-types/media-types.xhtml\n\nExample:\n```js\naccepts={['image/*', 'video/mp4', 'audio/*', '.pdf']}\n```\n\n---\n\n`multiple` - *Boolean*\n\nDefault: `true`\n\nAllow multiple files\n\n---\n\n`clickable` - *Boolean*\n\nDefault: `true`\n\nDropzone is clickable to open file browser. Disable for dropping only.\n\n---\n\n`maxFiles` - *Number*\n\nDefault: `Infinity`\n\nMaximum number of files allowed\n\n---\n\n`maxFileSize` - *Number*\n\nDefault: `Infinity`\n\nMaximum file size allowed (in bytes)\n\n---\n\n`minFileSize` - *Number*\n\nDefault: `0`\n\nMinimum file size allowed (in bytes)\n\n---\n\n`dragActiveClassName` - *String*\n\nClass added to the Files component when user is actively hovering over the dropzone with files selected.\n\n---\n\n`inputProps` - *Object*\n\nDefault: `{}`\n\nInject properties directly into the underlying HTML `file` input. Useful for setting `required` or overriding the `style` attributes.\n\n---\n\n## Examples\n\nTo run the examples locally, clone and install peer dependencies (React 16.8+)\n\n```\ngit clone https://github.com/mother/react-files\nnpm install\nnpm i react react-dom\n```\n\nThen run the examples server:\n```\nnpm run examples\n```\n\nThen visit http://localhost:8080/\n\n## License\n\nMIT. Copyright (c) Mother Co. 2023\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmother%2Freact-files","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmother%2Freact-files","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmother%2Freact-files/lists"}