{"id":13400795,"url":"https://github.com/rpldy/react-uploady","last_synced_at":"2025-05-14T15:04:30.656Z","repository":{"id":37479226,"uuid":"221179329","full_name":"rpldy/react-uploady","owner":"rpldy","description":"Modern file uploading - components \u0026 hooks for React","archived":false,"fork":false,"pushed_at":"2025-05-10T15:40:20.000Z","size":30009,"stargazers_count":1169,"open_issues_count":0,"forks_count":40,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-05-13T07:25:25.434Z","etag":null,"topics":["browser","chunked-uploads","components","drag-and-drop","file-upload","file-uploader","files","hooks","javascript","react","react-native","reactjs","resumable","resumable-upload","ssr","tus","upload"],"latest_commit_sha":null,"homepage":"https://react-uploady.org","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/rpldy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["yoavniran"],"patreon":null,"open_collective":"react-uploady","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2019-11-12T09:29:05.000Z","updated_at":"2025-05-10T15:29:49.000Z","dependencies_parsed_at":"2024-01-17T02:12:43.019Z","dependency_job_id":"cf5790e2-9019-4137-87ff-c0cd8967d230","html_url":"https://github.com/rpldy/react-uploady","commit_stats":{"total_commits":845,"total_committers":11,"mean_commits":76.81818181818181,"dds":0.536094674556213,"last_synced_commit":"ab7544a28d99af556874cc496394e578f393e96b"},"previous_names":["yoavniran/react-uploady"],"tags_count":115,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rpldy%2Freact-uploady","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rpldy%2Freact-uploady/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rpldy%2Freact-uploady/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rpldy%2Freact-uploady/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rpldy","download_url":"https://codeload.github.com/rpldy/react-uploady/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254168704,"owners_count":22026206,"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":["browser","chunked-uploads","components","drag-and-drop","file-upload","file-uploader","files","hooks","javascript","react","react-native","reactjs","resumable","resumable-upload","ssr","tus","upload"],"created_at":"2024-07-30T19:00:55.539Z","updated_at":"2025-05-14T15:04:30.619Z","avatar_url":"https://github.com/rpldy.png","language":"JavaScript","funding_links":["https://github.com/sponsors/yoavniran","https://opencollective.com/react-uploady","https://opencollective.com/react-uploady/organization/0/website","https://opencollective.com/react-uploady/organization/3/website","https://opencollective.com/react-uploady/organization/1/website","https://opencollective.com/react-uploady/organization/2/website","https://opencollective.com/react-uploady/organization/5/website","https://www.buymeacoffee.com/yoav"],"categories":["File Handling","Tools","Uncategorized","JavaScript","React [🔝](#readme)"],"sub_categories":["Uncategorized"],"readme":"![React Uploady Logo](https://github.com/rpldy/react-uploady-docs/blob/master/static/img/uploady/react-uploady-text-logo-light.png#gh-dark-mode-only)\n![React Uploady Logo](https://github.com/rpldy/react-uploady-docs/blob/master/static/img/uploady/react-uploady-text-logo.png#gh-light-mode-only)\n\n\u003cp align=\"center\"\u003eModern file-upload components \u0026 hooks for React.\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://badge.fury.io/js/%40rpldy%2Fuploady\"\u003e\n        \u003cimg src=\"https://badge.fury.io/js/%40rpldy%2Fuploady.svg\" alt=\"npm version\" height=\"20\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/rpldy/react-uploady/actions/workflows/pr.yml\"\u003e\n        \u003cimg src=\"https://github.com/rpldy/react-uploady/actions/workflows/pr.yml/badge.svg\" alt=\"Build Status\"/\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://codecov.io/gh/rpldy/react-uploady\"\u003e\n      \u003cimg src=\"https://codecov.io/gh/rpldy/react-uploady/branch/master/graph/badge.svg\" alt=\"codecov status\"/\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://react-uploady-storybook.netlify.com\"\u003e\n       \u003cimg src=\"https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg\" alt=\"rpldy storybook\"/\u003e\n    \u003c/a\u003e  \n    \u003ca href=\"https://lerna.js.org/\"\u003e\n       \u003cimg src=\"https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg\" alt=\"lerna\"/\u003e\n    \u003c/a\u003e\n    \u003ca href=\"LICENSE.md\"\u003e\n       \u003cimg src=\"https://img.shields.io/github/license/rpldy/react-uploady?color=blue\u0026style=plastic\" alt=\"MIT License\"/\u003e\n    \u003c/a\u003e\n    \u003ca href=\"CODE_OF_CONDUCT.md\"\u003e\n       \u003cimg src=\"https://img.shields.io/badge/Contributor%20Covenant-v2.0%20adopted-ff69b4.svg\"/\u003e \n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/@rpldy/uploady\"\u003e\n        \u003cimg src=\"https://img.shields.io/npm/dm/@rpldy/uploader.svg?style=plastic\u0026color=blue\u0026label=monthly%20downloads\"/\u003e \n    \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003eContents\u003c/summary\u003e\n    \n* [Intro](#intro)\n* [Documentation](#documentation)\n* [Installation](#installation)\n* [Packages](#packages)\n* [Examples](#examples)\n* [Important Concepts](#important-concepts)\n* [Resumable Uploads](#resumable-uploads)\n* [UMD Bundles](#umd-bundles)\n* [Contribute](#contribute)  \n* [Acknowledgements](#acknowledgements)   \n\u003c/details\u003e\n\n## Intro\n\n\u003cp align=\"center\"\u003e\n    React-Uploady is a lightweight library - enabling you to build (client-side) file-upload features with just a few lines of code.\n    Uploady provides the foundations needed to upload files from the browser - The rest is up to you.\n\u003c/p\u003e\n\n![React-Uploady Demo](guides/rpldy-demo.gif)\n\nThe philosophy behind this library is that it should be as simple as possible to use, yet customizable at every point.\nYou can start simple, or you can configure just about every aspect of the upload flow. \nFor this purpose, there are components, hooks, and plenty of features. \nYou get to choose which ones you need and only install the dependencies required (See [Packages](#packages) details below)\n\nReact-Uploady has a small footprint (by design) with very few (tiny) dependencies.\n\n| Bundle                      | Minified size | GZipped size |\n|-----------------------------|---------------|--------------|\n| core                        | 29.1KB        | 10.5KB       |        \n| core + ui                   | 36.9KB        | 13.3KB       |      \n| core + ui + chunked support | 44.1KB        | 15.7KB       |    \n| everything                  | 71.0KB        | 22.9KB       |    \n\n## Documentation\n\n### Getting Started\n\n**The best place to get started is at our: [React-Uploady Documentation Website](https://react-uploady.org)**\n\nAnother great place to learn about React-Uploady is our [video series on Youtube](https://youtube.com/playlist?list=PLigk9hpU4jsqZM7Fr3DxThJ--hsFWG8xk).\n\n### Changelog\n\nFor a list of versions and changes, see the [CHANGELOG](CHANGELOG.md)\n\n### Discussions\n\nPlease check the [discussions area](https://github.com/rpldy/react-uploady/discussions) here in Github. If you have a question about use-cases or flows you'd like to achieve with Uploady, discussions is the place to look for existing answers or add your own.\n\nIf you're using Uploady in Production, please drop a comment [here](https://github.com/rpldy/react-uploady/discussions/131). It's always great to hear how people and companies use it.\n\n## Installation\n\nReact-uploady is a mono-repo, and as such provides multiple packages with different functionality.\n\nFor React applications, at the very least, you will need the Uploady provider:\n\n```shell\n#Yarn: \n   $ yarn add @rpldy/uploady\n\n#NPM:\n   $ npm i @rpldy/uploady\n``` \n\nIf you wish to use the uploading mechanism (no UI), at the very least, you will need the Uploader:\n\n```shell\n#Yarn:\n  $ yarn add @rpldy/uploader\n\n#NPM:\n  $ npm i @rpldy/uploader\n```\n\nAfter that, you can add additional packages as needed. See below for more details.\n\n## Packages\n\n### Main Packages\n* [@rpldy/uploader](packages/core/uploader) - The processing and queuing engine\n* [@rpldy/uploady](packages/ui/uploady) - The context provider for react-uploady and hooks (lots of hooks)\n\n### UI Packages\n* [@rpldy/upload-button](packages/ui/upload-button) - Upload button component and asUploadButton HOC  \n* [@rpldy/upload-preview](packages/ui/upload-preview) - Image\u0026video preview component for files being uploaded \n* [@rpldy/upload-url-input](packages/ui/upload-url-input) - Input component to send URL as upload info (ex: [Cloudinary](https://cloudinary.com/documentation/upload_images#auto_fetching_remote_images))\n* [@rpldy/upload-drop-zone](packages/ui/upload-drop-zone) - (Drag\u0026)Drop zone to upload files and folder content\n* [@rpldy/upload-paste](packages/ui/upload-paste) - Easily add paste-to-upload to React components\n* [@rpldy/retry-hooks](packages/ui/retry-hooks) - Hooks to interact with the retry mechanism\n\n### Providers\n* [@rpldy/chunked-uploady](packages/ui/chunked-uploady) - Wrapper for Uploady with support for chunked uploads\n* [@rpldy/tus-uploady](packages/ui/tus-uploady) - Wrapper for Uploady with support for tus(resumable) uploads  \n* [@rpldy/native-uploady](packages/native/native-uploady) - Uploady for React Native (no react-dom)\n\n\n### Senders\n* [@rpldy/sender](packages/core/sender) - Uploady's main file sender (XHR)\n* [@rpldy/chunked-sender](packages/core/chunked-sender) - add chunked uploads support on top of the XHR Sender\n* [@rpldy/tus-sender](packages/core/tus-sender) - add TUS resumable upload support  \n* [@rpldy/mock-sender](packages/core/mock-sender) - use Mock sender for testing purposes \n\n### Extras\n* [@rpldy/retry](packages/core/retry) - Add support for retrying failed uploads\n\n### Internal Packages\n* [@rpldy/shared](packages/core/shared) - Internal set of utils+types that all packages require  \n* [@rpldy/shared-ui](packages/ui/shared) - Internal set of utils+types that all UI packages require \n* [@rpldy/life-events](packages/core/life-events) - provides **cancellable** pub/sub \"events\" \n* [@rpldy/safe-storage](packages/core/safe-storage) - safe (don't throw) versions of local and session storage\n* [@rpldy/simple-state](packages/core/simple-state) - deep proxy object, so it's only updateable through an update method\n\n\n## Examples\n\nFor specific usage, see documentation in the relevant package README file.\n\nFor upload options, see the [@rpldy/uploady docs](https://react-uploady.org/docs/api/#props).\n\n### Simple Upload Button\n\nThis example shows how you add Uploady and UploadButton to your app.\nThis is all it takes to get file uploading to work in your React application.\n\n```javascript \n\nimport React from \"react\";\nimport Uploady from \"@rpldy/uploady\";\nimport UploadButton from \"@rpldy/upload-button\";\n\nconst App = () =\u003e (\u003cUploady\n    destination={{ url: \"https://my-server/upload\" }}\u003e\n    \u003cUploadButton/\u003e\n\u003c/Uploady\u003e);\n\n```\n\n### Custom Upload Button\n\nIn case you want to use your own component as the upload trigger, use the asUploadButton HOC:\n\n```javascript\n\nimport React from \"react\";\nimport Uploady from \"@rpldy/uploady\";\nimport { asUploadButton } from \"@rpldy/upload-button\";\n\nconst DivUploadButton = asUploadButton((props) =\u003e {\n    return \u003cdiv {...props} style={{ cursor: \"pointer\" }}\u003e\n        DIV Upload Button\n    \u003c/div\u003e\n});\n\nconst App = () =\u003e (\u003cUploady\n    destination={{ url: \"https://my-server/upload\" }}\u003e\n    \u003cDivUploadButton/\u003e\n\u003c/Uploady\u003e);\n\n```\n\n### Progress Hook\n\n```javascript\n\nimport React from \"react\";\nimport Uploady, { useItemProgressListener } from \"@rpldy/uploady\";\nimport UploadButton from \"@rpldy/upload-button\";\n\n//must be rendered inside \u003cUploady\u003e\nconst LogProgress = () =\u003e {\n    useItemProgressListener((item) =\u003e {\n        console.log(`\u003e\u003e\u003e\u003e\u003e (hook) File ${item.file.name} completed: ${item.completed}`);\n    });\n\n    return null;\n}\n\nconst App = () =\u003e (\u003cUploady\n    destination={{ url: \"https://my-server/upload\" }}\u003e\n    \u003cLogProgress/\u003e   \n    \u003cUploadButton/\u003e\n\u003c/Uploady\u003e);\n\n```\n### Add support for resumable(tus) uploads\n\n```javascript\n import React from \"react\";\n import TusUploady from \"@rpldy/tus-uploady\";\n import UploadButton from \"@rpldy/upload-button\";\n \n const App = () =\u003e (\u003cTusUploady\n     destination={{ url: \"https://my-tus-server/upload\" }}\n     chunkSize={2142880}\n     sendDataOnCreate\u003e\n     \u003cUploadButton/\u003e\n \u003c/TusUploady\u003e);\n```\n\n### Add support for chunked uploads\n\nCan be used with servers that support chunked uploads\n\n```javascript\nimport React from \"react\";\nimport ChunkedUploady from \"@rpldy/chunked-uploady\";\nimport UploadButton from \"@rpldy/upload-button\";\n\nconst App = () =\u003e (\u003cChunkedUploady\n    destination={{ url: \"https://my-server/upload\" }}\n    chunkSize={5242880}\u003e\n       \n    \u003cUploadButton/\u003e\n\u003c/ChunkedUploady\u003e);\n\n```\n\n\u003e Find more (advanced) examples in our [guides](https://react-uploady.org/docs/guides/) and [storybook](https://react-uploady-storybook.netlify.com/).\n\n## Important Concepts\n\n### Upload Options\n\nThese are the options that are passed to the [uploader](https://react-uploady.org/docs/api/uploader/#upload-options) to configure aspects of the upload process.\nFor example, whether files can be grouped in a single request (by default, no).\n\nUpload Options are typically passed to the [Uploady](https://react-uploady.org/docs/api/#props) instance. But these can be overridden. For example, by props passed to the [upload button](https://react-uploady.org/docs/api/components/uploadButton/#props).\nOr even during [upload processing](https://react-uploady.org/docs/guides/DynamicParameters/).  \n\n### Destination\n\nPassed as a part of the upload options. It's an object that is used to configure the end-point where the files will be uploaded to.\nIts type is defined [here](https://react-uploady.org/docs/api/types/#destination).\n\nSee more information in the [Uploady](https://react-uploady.org/docs/api/) doc.\n\nAt the very least, a destination should contain a URL property with the server endpoint.\n\n### Enhancer\n\n```javascript\n\n(uploader: UploaderType, trigger: Trigger\u003cmixed\u003e) =\u003e UploaderType\n``` \n\nEnhancers are functions that can enhance an uploader instance. They are also passed as part of the options given to the Uploady instance.\n\nAs they are applied when the uploader instance is created, they can change the way uploader does things or pass different defaults. \n\nSee this [guide](https://react-uploady.org/docs/guides/UploaderEnhancers/) for practical information and sample code.\n\n### Batch\n\nWhen a file or files are handed over to the uploader, they are grouped into a batch. \nThis batch will have its own lifetime [events](https://react-uploady.org/docs/api/events/).\nWith a batch ID, it is possible to cancel all files that are part of it. It can also be used to retry all files in the batch (see [@rpldy/retry](https://react-uploady.org/docs/packages/rpldy-retry/)).\n\n### BatchItem\n\nEach file (or URL) added to the uploader is wrapped by a BatchItem object. They will have a unique ID within the life-time of the uploader instance.\nA BatchItem has its own lifetime [events](https://react-uploady.org/docs/api/events/).\n\n## Resumable Uploads\n\nUploady supports resumable uploads through the [tus](https://tus.io/) [protocol](https://tus.io/protocols/resumable-upload.html).\nInstead of using \u0026lt;Uploady\u0026gt; from @rpldy/uploady, use \u0026lt;TusUploady\u0026gt; from @rpldy/tus-uploady and you will have resumable upload support on the client side.\nYour server will also have to support the same protocol for this to work, of course.\n\nSee the [@rpldy/tus-uploady](https://react-uploady.org/docs/packages/rpldy-tus-uploady/) documentation for more details.\n\n## UMD Bundles\n\nReact-uploady is also available on CDNs such as [unpkg.com](https://unpkg.com) and [jsdelivr.com](https://www.jsdelivr.com/)\n\nSee this [guide](guides/UMD.md) for more information on how to use.\n\n### jsDelivr\n\n| Bundle                      | URL                                                                                          |\n|-----------------------------|----------------------------------------------------------------------------------------------| \n| core                        | https://cdn.jsdelivr.net/npm/@rpldy/uploader/lib/umd/rpldy-core.umd.min.js                   |\n| core + ui                   | https://cdn.jsdelivr.net/npm/@rpldy/uploady/lib/umd/rpldy-ui-core.umd.min.js                 |\n| core + ui + chunked support | https://cdn.jsdelivr.net/npm/@rpldy/chunked-uploady/lib/umd/rpldy-ui-core-chunked.umd.min.js |  \n| everything                  | https://cdn.jsdelivr.net/npm/@rpldy/uploady/lib/umd/rpldy-all.umd.min.js                     |\n\nYou will most likely need the polyfill (core js) bundle as well (load it first):\n\n- core bundles -\u003e https://cdn.jsdelivr.net/npm/@rpldy/uploady/lib/umd/polyfills-bundle.js\n- everything bundle -\u003e https://cdn.jsdelivr.net/npm/@rpldy/uploady/lib/umd/polyfills-all-bundle.js\n\n### unpkg\n\n| Bundle                      | URL                                                                               |\n|-----------------------------|-----------------------------------------------------------------------------------|\n| core                        | https://unpkg.com/@rpldy/uploader/lib/umd/rpldy-core.umd.min.js                   |\n| core + ui                   | https://unpkg.com/@rpldy/uploady/lib/umd/rpldy-ui-core.umd.min.js                 |\n| core + ui + chunked support | https://unpkg.com/@rpldy/chunked-uploady/lib/umd/rpldy-ui-core-chunked.umd.min.js |  \n| everything                  | https://unpkg.com/@rpldy/uploady/lib/umd/rpldy-all.umd.min.js                     |\n\nYou will most likely need the polyfill (core js) bundle as well (load it first):\n\n- core bundles -\u003e https://unpkg.com/@rpldy/uploady/lib/umd/polyfills-bundle.js\n- everything bundle -\u003e https://unpkg.com/@rpldy/uploady/lib/umd/polyfills-all-bundle.js\n\n\u003e Note that unpkg does a redirect to the latest version in case the URL doesn't already contain it. So don't copy any of the URLs above into your code. \n\u003e Instead, load them in the browser first and then copy the final URL from there (after the redirect).  \n\n## Contribute\n\nShow Uploady your support by giving us a [⭐](https://github.com/rpldy/react-uploady/stargazers). \n\nIf you'd like to help Uploady grow \u0026 improve, take a look at the [Contributing](CONTRIBUTING.md) doc.\n\nThe [Discussions](https://github.com/rpldy/react-uploady/discussions) page is a great place to ask questions, raise ideas and interact with Uploady maintainer, users and contributors.\n\nAlready using Uploady in Production? Let us know how \u0026 where in this open [discussion](https://github.com/rpldy/react-uploady/discussions/131).\n\n### Financial Contributors\n\nCompanies/Organizations that have contributed to the project:\n\n\u003ca href=\"https://opencollective.com/react-uploady/organization/0/website\"\u003e\u003cimg src=\"https://opencollective.com/react-uploady/organization/0/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-uploady/organization/3/website\"\u003e\u003cimg src=\"https://opencollective.com/react-uploady/organization/4/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-uploady/organization/1/website\"\u003e\u003cimg src=\"https://opencollective.com/react-uploady/organization/1/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-uploady/organization/2/website\"\u003e\u003cimg src=\"https://opencollective.com/react-uploady/organization/2/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-uploady/organization/3/website\"\u003e\u003cimg src=\"https://opencollective.com/react-uploady/organization/3/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-uploady/organization/5/website\"\u003e\u003cimg src=\"https://opencollective.com/react-uploady/organization/5/avatar.svg\"\u003e\u003c/a\u003e\n\n#### Support us\n\nWant to help sustain and grow Uploady? You can become a financial backer on OpenCollective.\n\nBecome a financial contributor and help us sustain our community.\n\n\u003e You can make a one-time contribution or on a monthly basis\n\n\u003ca href=\"https://opencollective.com/react-uploady\" target=\"_blank\"\u003e\u003cimg src=\"https://images.opencollective.com/static/images/become_backer.svg\"\u003e\u003c/a\u003e\n\nOr just [buy me a coffee](https://www.buymeacoffee.com/yoav) 😄\n\n\n## Acknowledgements \n\nlogo's wing thanks to \u003ca href=\"https://www.vecteezy.com/free-vector/illustration\"\u003eIllustration Vectors by Vecteezy\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frpldy%2Freact-uploady","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frpldy%2Freact-uploady","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frpldy%2Freact-uploady/lists"}