Lightweight React Hooks For Resumable File Uploads

Lightweight and simple React hooks for resumable file uploads using tus.

Basic usage:

1. Install and import the useTus hook.

# Yarn
$ yarn add use-tus tus-js-client

# NPM
$ npm i use-tus tus-js-client

import { useTus } from 'use-tus'

2. Create a basic file uploader.

const Uploader = () => {
  const { upload, setUpload, isSuccess, error, remove } = useTus();
  const handleSetUpload = useCallback((event: ChangeEvent<HTMLInputElement>) => {
      const file = event.target.files.item(0);
      if (!file) {
        return;
      }
      setUpload(file, {
        endpoint: 'https://tusd.tusdemo.net/files/',
        metadata: {
          filename: file.name,
          filetype: file.type,
        },
      });
    },
    [setUpload]
  );
  const handleStart = useCallback(() => {
    if (!upload) {
      return;
    }
    // Start to upload the file.
    upload.start();
  }, [upload]);
  return (
    <div>
      <input type="file" onChange={handleSetUpload} />
      <button type="button" onClick={handleStart}>
        Upload
      </button>
    </div>
  );
};

Preview:

Download Details:

Author: kqito

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/kqito/use-tus

License: MIT