Uploady is a lightweight library for React that enables you to build (client-side) file-upload features with just a few lines of code. It provides the foundations needed to upload files from the browser – The rest is up to you.
Main Features:
- Single & Multiple file uploads
- Upload progress
- Abort running uploads (single, batch, all)
- Retry failed or cancelled uploads
- Image/Video previews of uploading files
- Dynamically updating upload params (headers, etc.)
- Support for drag&drop (including folders)
- Paste to upload
- Chunked uploads
- Resumable uploads (Tus)
- And more…
Main Components:
- Upload Button: Easy to use & stylable component to initiate local file uploads
- Upload Preview: Customizable preview component for files being uploaded
- Upload Drop-Zone: Drop zone component to initiate file and folder uploads
- Upload URL Input: Input component to enter a URL that will be sent as an upload
Basic usage:
1. Install and import the Uploady.
# Yarn $ yarn add @rpldy/uploady # NPM $ npm i @rpldy/uploady
import React from "react"; import Uploady from "@rpldy/uploady";
2. Import a package of your choice:
- @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
- @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)
- @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
- @rpldy/retry – Add support for retrying failed uploads
import UploadButton from "@rpldy/upload-button";
3. Create a basic file uploader.
const MyApp = () => (
<Uploady destination={{ url: "https://my-server.com/upload" }}>
<UploadButton/>
</Uploady>
);
Preview:
Download Details:
Author: rpldy
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/rpldy/react-uploady
License: MIT
