{"id":13450775,"url":"https://github.com/neighborhood999/use-input-file","last_synced_at":"2026-02-26T04:04:17.965Z","repository":{"id":42534913,"uuid":"264918602","full_name":"neighborhood999/use-input-file","owner":"neighborhood999","description":"React hook for creating input file","archived":false,"fork":false,"pushed_at":"2023-01-08T14:04:14.000Z","size":1219,"stargazers_count":3,"open_issues_count":4,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T15:47:07.747Z","etag":null,"topics":[],"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/neighborhood999.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-18T11:28:42.000Z","updated_at":"2024-06-15T22:02:02.000Z","dependencies_parsed_at":"2023-02-08T06:16:34.357Z","dependency_job_id":null,"html_url":"https://github.com/neighborhood999/use-input-file","commit_stats":null,"previous_names":["neighborhood999/useinputfile"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neighborhood999%2Fuse-input-file","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neighborhood999%2Fuse-input-file/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neighborhood999%2Fuse-input-file/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neighborhood999%2Fuse-input-file/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/neighborhood999","download_url":"https://codeload.github.com/neighborhood999/use-input-file/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247737741,"owners_count":20987718,"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-07-31T07:00:38.349Z","updated_at":"2025-10-23T18:16:21.785Z","avatar_url":"https://github.com/neighborhood999.png","language":"TypeScript","funding_links":[],"categories":["Packages"],"sub_categories":[],"readme":"# use-input-file\n\n![CI](https://github.com/neighborhood999/use-input-file/workflows/CI/badge.svg)\n[![npm](https://flat.badgen.net/npm/v/use-input-file)](https://www.npmjs.com/package/use-input-file)\n[![minified + gzip](https://flat.badgen.net/bundlephobia/min/use-input-file)](https://bundlephobia.com/result?p=use-input-file)\n[![styled with prettier](https://flat.badgen.net/badge/style%20with/prettier/ff69b4)](https://github.com/prettier/prettier)\n\nA React hook that allows you to handle HTML `\u003cinput type=\"file\"\u003e`.\n\n## DEMO\n\n[![Edit](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/use-input-file-demo-5wke5)\n\n## Installation\n\n```sh\n$ yarn add use-input-file\n```\n\n## Basic Usage\n\n```jsx\nimport React, { useEffect } from 'react';\nimport useInputFile from 'use-input-file';\n\nconst App () =\u003e {\n  const { ref, files } = useInputFile();\n\n  // Check your upload files changed\n  useEffect(() =\u003e {\n    console.log(files);\n  }, [files]);\n\n  return (\n    \u003cinput ref={ref}\u003e\n  )\n};\n```\n\n## Passing Custom `ref`\n\n```jsx\nimport React, { useEffect, useRef } from 'react';\n\nconst App () =\u003e {\n  const ref = useRef(null);\n  const { files } = useInputFile({ ref });\n\n  // Check your upload files\n  useEffect(() =\u003e {\n    console.log(files);\n  }, [files]);\n\n  return (\n    \u003cinput ref={ref}\u003e\n  )\n};\n```\n\n## Setting Input Options\n\nYou can set input file attributes by `options`:\n\n```jsx\nconst options = { multiple: true, accept: 'image/*' };\nconst { ref, files } = useInput({ options });\n\n// render: \u003cinput type=\"file\" multiple=\"multiple\" accept=\"image/*\"\u003e\n```\n\n## The `onChange` Callback\n\nAs above, the hook default will return empty `files`, when the input file changed will return new `files` with your changed.\n\nSometimes you may want to custom onChange for your logic, so you can pass `onChange` callback argument to `hook` and handle input file change for you want.\n\n```jsx\nconst onChange = event =\u003e {\n  // Doing something...\n  console.log(event.currentTarget.files);\n};\nconst { ref } = useInputFile({ onChange });\n```\n\n## API\n\n```js\nconst { ref, file } = useInputFile({/* ...options */});\n```\n\n### Hook Parameters\n\nYou can configure `use-input-file` via the below parameters:\n\n| Key      | Type            | Default                                 | Description                                                                                                         |\n| -------- | --------------- | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |\n| ref      | React.RefObject | `React.RefObject\u003cHTMLInputElement\u003e`     | Passing your custom `ref`.                                                                                          |\n| options  | object          | `{ accept: string, multiple: boolean }` | Check [MDN - input type=\"file\"](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file) for more details. |\n| onChange | function        |                                         | You can pass `onChange` callback argument to `hook` and handle input file change for you want.                      |\n\n### Return Values\n\n| Key   | Type            | Default           | Description                                                                                                                                                                                                                    |\n| ----- | --------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| ref   | React.RefObject | `React.RefObject` | The react `ref`.                                                                                                                                                                                                               |\n| files | array           | `[]`              | The hook default will return empty [File](https://developer.mozilla.org/en-US/docs/Web/API/File), when the input file changed will return new [File](https://developer.mozilla.org/en-US/docs/Web/API/File) with your changed. |\n\n\n## Tests\n\n```sh\n$ make test\n```\n\n## Lint\n\n```sh\n$ make lint\n```\n\n## License\n\nMIT © [Peng Jie](https://github.com/neighborhood999/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneighborhood999%2Fuse-input-file","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fneighborhood999%2Fuse-input-file","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneighborhood999%2Fuse-input-file/lists"}