React resumable uploader

Introduce

This uploader is focused on uploading large files with the possibility of renewable download. This library is explicitly designed for modern browsers that support IndexedDB, FileReader API and Web Workers API. The upload of files occurs through the WebSocket and for this task the socket.IO library is used inside.

Installation

npm install react-resumable-uploader -S

To start

You need to import two components:

First component.

import { UploaderProvider } from  'react-resumable-uploader';

This component is the root one and it should be wrapped in a component that provides the OnProgress OnError methods. This is done so that you can use any tool to manage the state (Redux or Mobx).

This example uses Mobx :

import { UploaderProvider } from  'react-file-uploader';

@inject("uploaderStore", "messagesStore")
@observer
class  UploaderWrapper  extends  Component {
  onProgress  = (filesState) => {
    const { setChangedState } =  this.props.uploaderStore;
  
    setChangedState(filesState);
  }

  onError  = (error) => {
    const { setMessage } =  this.props.messagesStore;
  
    setMessage(error);
  }

  complete  = (file) => {
    //to do some action
  }

  render() {
    return (
      <UploaderProvider  
        {...this.props} //childrens and params
        onProgress={this.onProgress}
        onError={this.onError}
        complete={this.complete}/>
    );
  }
}

Then put it in the root of your application. For example:

class  App  extends  Component {
 render() {
   const  params  = {
     chunkSize:  5  *  1024  *  1024,
     maxConnectionAttempts:  5,
     fileThrottle:  300,
     mainThrottle:  300,
     url:  'ws://{hostname}/{endpoint}',
     events: {
       GET_LAST_CHUNK: 'get-last-chunk',
       SEND_NEXT_CHUNK: 'send-next-chunk',
       SEND_NEXT_CHUNK_SUCCESS: 'send-next-chunk-successful',
       SEND_FILE_SUCCESS: 'send-file-successful',
       CANCEL_UPLOAD: 'cancel-upload',
       SEND_CHUNK_AGAIN: 'send-chunk-again',
       ERROR: 'error',
     }
   };
   
   return (
     <UploaderWrapper  params={params}>
       <div  className="App">
         <Header/>
         <Menu/>
         <Main/>
       </div>
     </UploaderWrapper>
    );
  }
}

Second component.

import { uploaderContext } from  'react-resumable-uploader';

This component is a higher-order component (HOC) that provides methods submit(files), pause(fileId), resume(fileId), stop(fileId). It can be used anywhere in the application. For example: If You use babel-plugin-transform-decorators-legacy

import { uploaderContext } from  'react-resumable-uploader';

@uploaderContext
class  UploadManager  extends  Component {
  stop  = (fileId) => {
    return  this.props.stop(fileId);
  }
  
  pause  = (fileId) => {
    return  this.props.pause(fileId);
  }
  
  resume  = (fileId) => {
    return  this.props.resume(fileId);
  }

  render() {}
}

export  default  UploadManager;

or if you do not use decorators

export  default uploaderContext(UploadManager);

API

Let's start with a description of the methods provided by the uploaderContext component:

| Method | Parameters | | |---------------|-----------|-------------| |stop |fileId<string>|Returns a boolean value if the action was successful| |pause|fileId<string>|Returns a boolean value if the action was successful| |resume|fileId<string>|Returns a boolean value if the action was successful| |submit|Array<File>, url<string>||

Parameters for UploaderProvider component:

Callbacks

| Parameter | Type | Arguments | |---------------|------------|-------------| |onProgress - provides progress of file upload |function| Array<FileObject> --see below| |onError |function| errorObject | |complete |function| <FileObject> --see below|

Object params

| Key | Type | Description | |---------------|------------|-------------| |chunkSize |byte number| for example - 5 * 1024 * 1024 | |maxConnectionAttempts |number| | |fileThrottle |number<ms>| to update the status of a single file | |mainThrottle |number<ms>| to update the status of all files | |url |string| 'ws://{hostname}/{endpoint}' Will be used for all files. Also you can pass URL for each file in the submit method | |events |object| Contains event names used to communicate using the web socket (are described below) | |events.GET_LAST_CHUNK |eventName<string> .emit() and .on()<number>| sends an object of the form {id: "fileId"} Accepts data of type last chunk<number>| |events.SEND_NEXT_CHUNK |eventName<string> .emit() file chunk<object>| Sends data of type <PostData> --see below| events.SEND_NEXT_CHUNK_SUCCESS |eventName<string> .on()| sends the next piece on this event | events.SEND_FILE_SUCCESS |eventName<string> .on()| Delete the file from the IndexDB on this event | events.CANCEL_UPLOAD |eventName<string> .emit()| Sends fileId<string>. Notifies when the upload stops | events.SEND_CHUNK_AGAIN |eventName<string> .on()| Starts the upload from the last successful piece | events.ERROR |eventName<string> .on()| Accepts any errors from the server and calls onError callback |

<PostData> interface (Dispatched to the server)

| Key | Type | Description | |---------------|------------|-------------| |chunk |<ArrayBuffer>| | |fileId |<string>| | |chunkNum |current chunk<number>| | |chunkSize |byteLength<number>| | |type |file type<string>| | |name |file name<string>| | |isFinal |<boolean>| When the last chunk is sent it's true|

<FileObject> interface (Passed to onProgress callback function)

| Key | Type | Description | |---------------|------------|-------------| |progress |percent| | |fileId |<string>| | |size |file size<byte number>| | |name |file name<string>| | |type |file type<string>| | |passedBytes |byte number| | |currentChunk |number| | |isFinal |<boolean>| |

Utils

import {getFileSize, getFileName, getFileFormat} from 'react-resumable-uploader';

getFileSize(bytes) - translate bytes in a human-readable form; getFileName(name|string) - translate name in a human-readable form; getFileFormat(name|string) - returns file extension;

License

MIT