Modern File Upload Components & Hooks For React – Uploady

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:

Modern File Upload Components & Hooks For React Uploady

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

You Might Be Interested In:

Add Comment