@rpldy/chunked-uploady

Chunked Uploady

This package is provided as a convenient alternative to the main Uploady package. To be used in case chunked upload is required.

The server that is accepting the upload must also support chunked uploads. The original file is broken down into smaller blobs, which are sent in different requests. Each request is sent with the Content-Range header to specify the bytes range.

Internally, ChunkedUploady uses @rpldy/chunked-sender instead of the default sender.

Chunked-Sender, doesn't support grouped uploads (see Upload Options documentation) or URL uploading. These will be handed over to the default @rpldy/sender.

In case the browser doesn't support chunking (blob slicing), the default sender will be used as well.

The best place to get started is at our: React-Uploady Documentation Website

Installation

#Yarn: 
   $ yarn add @rpldy/chunked-uploady

#NPM:
   $ npm i @rpldy/chunked-uploady

Note that you don't need @rpldy/uploady, it comes with.

Props

Name (* = mandatory)	Type	Default	Description
chunked	boolean	true	chunk uploads. setting to false will return to default sending behavior
chunkSize	number	5242880	the chunk size. relevant when uploaded file is larger than the value
retries	number	0	how many times to retry sending a failed chunk
parallel	number	0	how many (chunk) requests to send simultaneously

In addition, all UploadOptions props can be passed to ChunkedUploady. In order to override configuration passed to the parent Uploady component. See Uploady documentation for detailed list of upload options.

Hooks

Chunked Uploady provides hooks for chunk life-time events:

useChunkStartListener

Called when a chunk is about to be sent to the server

This event is cancellable

import { useChunkStartListener } from "@rpldy/chunked-uploady";

const MyComponent = () => {
    useChunkStartListener((data) => {
        return {
            url: `${data.url}/${data.chunk.index}`
        };  
    });   
};

useChunkFinishListener

Called when a chunk has finished uploading

Example

import { useChunkFinishListener } from "@rpldy/chunked-uploady";

const MyComponent = () => {
    useChunkFinishListener(({ chunk }) => {
        console.log(`Chunk Finished - ${chunk.id} - attempt: ${chunk.attempt}`);
    });
};