Installation
Requirements
React-Uploady defines react & react-dom as peer dependencies with the minimum version of: 16.8.0
Install
React-uploady is a mono-repo, and as such provides multiple packages with different functionality.
For React applications, at the very least, you will need the Uploady provider:
- npm
- Yarn
- pnpm
npm install @rpldy/uploady
yarn add @rpldy/uploady
pnpm add @rpldy/uploady
If you wish to use the uploading mechanism (no UI components), at the very least, you will need the Uploader:
- npm
- Yarn
- pnpm
npm install @rpldy/uploader
yarn add @rpldy/uploader
pnpm add @rpldy/uploader
After that, you can add additional packages as needed.
Available Packages
Main Packages
- @rpldy/uploader - The processing and queuing engine
- @rpldy/uploady - The context provider for react-uploady and hooks (lots of hooks)
UI Packages
- @rpldy/upload-button - Upload button component and asUploadButton HOC
- @rpldy/upload-preview - Image&video preview component for files being uploaded
- @rpldy/upload-url-input - Input component to send URL as upload info (ex: Cloudinary)
- @rpldy/upload-drop-zone - (Drag&)Drop zone to upload files and folder content
- @rpldy/upload-paste - Easily add paste-to-upload to React components
- @rpldy/retry-hooks - Hooks to interact with the retry mechanism
Providers
- @rpldy/chunked-uploady - Wrapper for Uploady with support for chunked uploads
- @rpldy/tus-uploady - Wrapper for Uploady with support for tus(resumable) uploads
- @rpldy/native-uploady - Uploay for React Native (no react-dom)
Senders
- @rpldy/sender - Uploady's main file sender (XHR)
- @rpldy/chunked-sender - add chunked uploads support on top of the XHR Sender
- @rpldy/tus-sender - add TUS resumable upload support
- @rpldy/mock-sender - use Mock sender for testing purposes
Extras
- @rpldy/retry - Add support for retrying failed uploads
Internal Packages
- @rpldy/shared - Internal set of utils+types that all packages require
- @rpldy/shared-ui - Internal set of utils+types that all UI packages require
- @rpldy/life-events - provides cancellable pub/sub "events"
- @rpldy/safe-storage - safe (don't throw) versions of local and session storage
- @rpldy/simple-state - deep proxy object, so it's only updateable through an update method
UMD Bundles
React-uploady is also available on CDNs such as unpkg.com and jsdelivr.com
See this guide for more information on how to use.
jsDelivr
You will most likely need the polyfill (core js) bundle as well (load it first):
- core bundles -> https://cdn.jsdelivr.net/npm/@rpldy/uploady/lib/umd/polyfills-bundle.js
- everything bundle -> https://cdn.jsdelivr.net/npm/@rpldy/uploady/lib/umd/polyfills-all-bundle.js
unpkg
You will most likely need the polyfill (core js) bundle as well (load it first):
- core bundles -> https://unpkg.com/@rpldy/uploady/lib/umd/polyfills-bundle.js
- everything bundle -> https://unpkg.com/@rpldy/uploady/lib/umd/polyfills-all-bundle.js
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. Instead, load them in the browser first and then copy the final URL from there (after the redirect).