{"id":13481342,"url":"https://github.com/kimmelsg/cj-upload","last_synced_at":"2025-03-27T12:30:45.504Z","repository":{"id":39999025,"uuid":"66902250","full_name":"kimmelsg/cj-upload","owner":"kimmelsg","description":"Higher order React components for file uploading (with progress) react file upload","archived":true,"fork":false,"pushed_at":"2022-04-09T01:20:28.000Z","size":1164,"stargazers_count":581,"open_issues_count":12,"forks_count":27,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-03-24T21:03:01.862Z","etag":null,"topics":["file","file-upload","progress","react","react-components","upload","upload-dialog","xhr"],"latest_commit_sha":null,"homepage":"","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/kimmelsg.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}},"created_at":"2016-08-30T03:15:37.000Z","updated_at":"2025-03-20T12:51:16.000Z","dependencies_parsed_at":"2022-06-26T06:40:02.224Z","dependency_job_id":null,"html_url":"https://github.com/kimmelsg/cj-upload","commit_stats":null,"previous_names":["navjobs/navload","navjobs/upload"],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimmelsg%2Fcj-upload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimmelsg%2Fcj-upload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimmelsg%2Fcj-upload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimmelsg%2Fcj-upload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kimmelsg","download_url":"https://codeload.github.com/kimmelsg/cj-upload/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245844801,"owners_count":20681779,"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":["file","file-upload","progress","react","react-components","upload","upload-dialog","xhr"],"created_at":"2024-07-31T17:00:51.029Z","updated_at":"2025-03-27T12:30:45.116Z","avatar_url":"https://github.com/kimmelsg.png","language":"JavaScript","funding_links":[],"categories":["Components","📦 Legacy \u0026 Inactive Projects"],"sub_categories":["Inputs"],"readme":"## Deprecated\n\nPlease look at [react-use-upload](https://github.com/zackify/react-use-upload) for the same functionality, updated using React hooks.\n\n\n[![CircleCI](https://circleci.com/gh/navjobs/upload.svg?style=svg)](https://circleci.com/gh/navjobs/upload)\n[![Coverage Status](https://coveralls.io/repos/github/navjobs/upload/badge.svg?branch=master)](https://coveralls.io/github/navjobs/upload?branch=master)\n\n## @navjobs/upload\n\n## v4\n\nI'm working on a v4 soon that simplfies the api and removes the children-as-a-function paradigm to something more extendable. Also revamping the test suit. It'll be a complete rewrite.\n\n## What\nA set of React components for handling file uploads. If you simply want to turn any component into a file upload dialog, wrap it in our `\u003cUploadField/\u003e` component that exposes the files after selection. Need to process a file upload and receive the upload progress? Wrap `\u003cUploadField/\u003e` with `\u003cUploader/\u003e`. You can see examples inside [our storybook](/stories/index.js).\n\n## Why this?\n\n- Any component can be an upload dialog. Wrap it in `\u003cUploadField/\u003e`. This means you have ultimate styling control.\n- Simple component API for upload progress. Pass headers, extra fields, anything.\n- Zero dependencies (other than React!)\n\n## Install\n\n```\nyarn add @navjobs/upload\n```\n\n## In this library\n\n- [UploadField](#uploadfield) gives access to files after drag and drop / clicking on the area wrapped\n- [Uploader](#uploader) triggers an xhr upload to a url with file progress\n- [SignedUploader](#signed-uploader) same as above, but helps generate a [signed url](https://cloud.google.com/storage/docs/access-control/signed-urls) from your api.\n- [Imperative api](#imperative-api) that lets you trigger a file upload with progress outside of react.\n\n### UploadField\n\n```js\nimport { UploadField } from '@navjobs/upload'\n\n  \u003cUploadField\n    onFiles={files =\u003e //files object here}\n    containerProps={{\n      className: 'resume_import'\n    }}\n    uploadProps={{\n      accept: '.pdf,.doc,.docx,.txt,.rtf',\n    }}\n  \u003e\n    \u003cdiv\u003e\n      Click here to upload! This can be an image,\n      or any component you can dream of.\n    \u003c/div\u003e\n  \u003c/UploadField\u003e\n```\n\n### Uploader\n\nUse `\u003cUploadField /\u003e` inside of this component; pass the files to it and handle the upload!\n\n```js\nimport { Uploader } from '@navjobs/upload'\n\n\u003cUploader\n  request={{\n    fileName: 'file',\n    url: 'https://upload.com',\n    method: 'POST',\n    fields: {\n      //extra fields to pass with the request\n      full_name: 'Testing extra fields',\n    },\n    headers: {\n      //custom headers to send along\n      Authorization: 'Bearer: Test',\n    },\n    // use credentials for cross-site requests\n    withCredentials: false,\n  }}\n  onComplete={({ response, status }) =\u003e /*do something*/}\n  //upload on file selection, otherwise use `startUpload`\n  uploadOnSelection={true}\n\u003e\n  {({ onFiles, progress, complete }) =\u003e (\n    \u003cdiv\u003e\n      \u003cUploadField onFiles={onFiles}\u003e\n        \u003cdiv\u003e\n          Click here to select a file!\n        \u003c/div\u003e\n      \u003c/UploadField\u003e\n      {progress ? `Progress: ${progress}` : null}\n      {complete ? 'Complete!' : null}\n    \u003c/div\u003e\n  )}\n\u003c/Uploader\u003e\n```\n\n### Signed Uploader\n\nThis is a useful component for generating signed urls on your backend for a service like  [AWS](http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/private-content-signed-urls.html) or [Google Cloud](https://cloud.google.com/storage/docs/access-control/signed-urls).\nThe workflow generally involes hitting your own api, then uploading to the url that your api returns. After the fact, you hit your api again to say that the upload is finished.\n\n```js\nimport { SignedUploader } from '@navjobs/upload'\n\n\n\u003cSignedUploader\n  //grab this url from your api\n  beforeRequest={() =\u003e new Promise(resolve =\u003e resolve({ url: 'http://storage.googlecloud.com' }))}\n  request={({ before, files }) =\u003e ({\n      url: before.url,\n      method: 'PUT',\n      headers: {\n        'Content-Type': files[0].type\n      }\n    })}\n  afterRequest={({ before, status }) =\u003e new Promise(resolve =\u003e {\n    resolve('finished the upload!');\n  })}\n\u003e\n\n```\n\n### Imperative API\n\nIf you need to upload files and recieve progress, but can't wrap an `Uploader` around where you receive the files, feel free to use this:\n\n```js\nimport { UploadRequest } from '@navjobs/upload'\n\nasync uploadFiles() {\n  let { response, error, aborted } = await UploadRequest(\n    {\n      request: {\n        url: 'blah' //same as above request object\n      },\n      files, //files array\n      progress: value =\u003e console.log('progress!', value)\n    }  \n  )\n  //do something with response\n}\n```\n\n\n## FAQ\n\n**Q:** Part of the component I'm wrapping isn't cursor pointer?\n\n**A:** You may need to set\n\n```css\n::-webkit-file-upload-button { cursor:pointer; }\n```\nIn your css. For some reason file uploads aren't always pointer.\n\n## License\n\nThis project is licensed under the terms of the [MIT](/LICENSE.md) license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkimmelsg%2Fcj-upload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkimmelsg%2Fcj-upload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkimmelsg%2Fcj-upload/lists"}