{"id":16234144,"url":"https://github.com/zackify/use-upload","last_synced_at":"2026-03-06T19:35:02.527Z","repository":{"id":54170137,"uuid":"188947812","full_name":"zackify/use-upload","owner":"zackify","description":"Framework agnostic library handling file uploads with progress, direct to AWS / GCP, and other locations","archived":false,"fork":false,"pushed_at":"2021-04-10T14:47:56.000Z","size":503,"stargazers_count":77,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-03T04:02:48.490Z","etag":null,"topics":["file-upload","hooks","react","react-hook","svelte","xhr"],"latest_commit_sha":null,"homepage":"","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/zackify.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-28T03:32:17.000Z","updated_at":"2025-02-19T03:03:29.000Z","dependencies_parsed_at":"2022-08-13T08:10:57.034Z","dependency_job_id":null,"html_url":"https://github.com/zackify/use-upload","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/zackify/use-upload","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zackify%2Fuse-upload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zackify%2Fuse-upload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zackify%2Fuse-upload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zackify%2Fuse-upload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zackify","download_url":"https://codeload.github.com/zackify/use-upload/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zackify%2Fuse-upload/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30193649,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-06T19:07:06.838Z","status":"ssl_error","status_checked_at":"2026-03-06T18:57:34.882Z","response_time":250,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["file-upload","hooks","react","react-hook","svelte","xhr"],"created_at":"2024-10-10T13:15:08.910Z","updated_at":"2026-03-06T19:35:02.508Z","avatar_url":"https://github.com/zackify.png","language":"TypeScript","readme":"**Zero dependency, total control, file upload hook for React and Svelte with upload progress.**\n\n100% Test Coverage across React + Svelte\n\nThis is a simple hook for handling file uploads across multiple frameworks. It takes the simplest approach possible so that you have full control over the upload process, while still providing lots of help vs implementing this yourself.\n\nIt has upload progress due to using XHR, and can be used for uploading files direct to Google Cloud, AWS, etc.\n\n### Install\n\n```js\nnpm install @zach.codes/use-upload\n```\n\n## Framework Agnostic\n\nThis library supports the same api across frameworks. Currently only svelte and React have implementations.\n\n## Svelte\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n  import { useUpload } from \"@zach.codes/use-upload/lib/svelte\";\n\n  let [upload, state] = useUpload(({ files }) =\u003e ({\n    method: \"PUT\",\n    url: \"http://localhost:5000\",\n    body: files[0],\n  }));\n\u003c/script\u003e\n\n\u003cdiv\u003e\n  {#if $state.done}\n    \u003cdiv\u003eDone uploading!\u003c/div\u003e\n  {/if}\n  {#if $state.error}\n    \u003cdiv\u003eError uploading: {$state.error}\u003c/div\u003e\n  {/if}\n  {#if $state.loading}\n    \u003cdiv\u003e{$state.progress}% complete\u003c/div\u003e\n  {/if}\n  \u003cinput\n    type=\"file\"\n    on:change={(e) =\u003e {\n      if (e.currentTarget.files) upload({ files: e.currentTarget.files });\n    }}\n  /\u003e\n\u003c/div\u003e\n\n```\n\n### React\n\nHere's a basic example of uploading a single file to a url in React. The below examples all work in Svelte as well.\n\n```tsx\nimport { useUpload } from \"@zach.codes/use-upload/lib/react\";\n\nconst MyComponent = () =\u003e {\n  let [upload, { progress, done, loading }] = useUpload(({ files }) =\u003e ({\n    method: \"PUT\",\n    url: \"http://localhost:4000\",\n    body: files[0],\n  }));\n\n  return (\n    \u003cdiv\u003e\n      {loading ? `${progress}% complete` : null}\n      \u003cinput\n        type=\"file\"\n        onChange={(e) =\u003e {\n          if (e.target.files) {\n            upload({ files: e.target.files });\n          }\n        }}\n      /\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n#### Formdata\n\nIt's up to you to pass in formdata\n\n```tsx\nimport { useUpload } from \"@zach.codes/use-upload/lib/react\";\n\nconst MyComponent = () =\u003e {\n  let [upload, { progress, done, loading }] = useUpload(({ files }) =\u003e {\n    let formData = new FormData();\n    files.forEach((file) =\u003e formData.append(file.name, file));\n\n    return {\n      method: \"PUT\",\n      url: \"http://localhost:4000\",\n      body: formData,\n    };\n  });\n\n  return (\n    \u003cdiv\u003e\n      {loading ? `${progress}% complete` : null}\n      \u003cinput\n        type=\"file\"\n        onChange={(e) =\u003e {\n          if (e.target.files) {\n            upload({ files: e.target.files });\n          }\n        }}\n      /\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n#### Adding headers\n\nYou can pass a custom headers object\n\n```tsx\nimport { useUpload } from \"@zach.codes/use-upload/lib/react\";\n\nconst MyComponent = () =\u003e {\n  let [upload, { progress, done, loading }] = useUpload(({ files }) =\u003e {\n    let formData = new FormData();\n    files.forEach((file) =\u003e formData.append(file.name, file));\n\n    return {\n      method: \"PUT\",\n      url: \"http://localhost:4000\",\n      body: formData,\n      headers: { Authorization: \"test\" },\n    };\n  });\n\n  return (\n    \u003cdiv\u003e\n      {loading ? `${progress}% complete` : null}\n      \u003cinput\n        type=\"file\"\n        onChange={(e) =\u003e {\n          if (e.target.files) {\n            upload({ files: e.target.files });\n          }\n        }}\n      /\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n#### Customizing the request\n\nYou have full access to the XHR object, so you can set withCredentials or anything else you'd like.\n\n```tsx\nimport { useUpload } from \"@zach.codes/use-upload/lib/react\";\n\nconst MyComponent = () =\u003e {\n  let [upload, { progress, done, loading }] = useUpload(({ files, xhr }) =\u003e {\n    xhr.withCredentials = true;\n\n    let formData = new FormData();\n    files.forEach((file) =\u003e formData.append(file.name, file));\n\n    return {\n      method: \"PUT\",\n      url: \"http://localhost:4000\",\n      body: formData,\n      headers: { Authorization: \"test\" },\n    };\n  });\n\n  return (\n    \u003cdiv\u003e\n      {loading ? `${progress}% complete` : null}\n      \u003cinput\n        type=\"file\"\n        onChange={(e) =\u003e {\n          if (e.target.files) {\n            upload({ files: e.target.files });\n          }\n        }}\n      /\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n#### Signed uploads\n\nSigned uploads to a storage bucket on AWS or similar service, usually require this flow:\n\n- Hit your own backend to generate a signed url\n- send the file to that signed url to upload direct\n- do something on your frontend after it finishes\n\nHere's how simple it is with this hook\n\n```tsx\nimport { useUpload } from \"@zach.codes/use-upload/lib/react\";\n\nconst MyComponent = () =\u003e {\n  let [upload, { progress, done, loading }] = useUpload(async ({ files }) =\u003e {\n    // This function is your request logic for getting a url\n    let url = await getUploadUrl({\n      caseId,\n      fileName: files[0].name,\n      contentType: files[0].type,\n    });\n    // returning undefined skips the upload logic, in case your `getUploadUrl` has an error\n    if (!url) return;\n\n    return {\n      method: \"PUT\",\n      url: url,\n      // send a single file in the body to the storage bucket\n      body: files[0],\n    };\n  });\n\n  useEffect(() =\u003e {\n    if (done) {\n      //refetch the data on the page, or some other action so the user can see the upload completed\n    }\n  }, [done, refetch]);\n\n  return (\n    \u003cdiv\u003e\n      {loading ? `${progress}% complete` : null}\n      \u003cinput\n        type=\"file\"\n        onChange={(e) =\u003e {\n          if (e.target.files) {\n            upload({ files: e.target.files });\n          }\n        }}\n      /\u003e\n    \u003c/div\u003e\n  );\n};\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzackify%2Fuse-upload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzackify%2Fuse-upload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzackify%2Fuse-upload/lists"}