react-resumable-uploader v0.1.5

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:

Parameters for UploaderProvider component:

Callbacks

Object params

<PostData> interface (Dispatched to the server)

<FileObject> interface (Passed to onProgress callback function)

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