Modern File Upload Components & Hooks For React – Uploady

Description:

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: