@rpldy/chunked-uploady
TypeScript icon, indicating that this package has built-in type declarations

1.8.1 • Public • Published
npm version circleci status codecov status bundlephobia badge rpldy storybook

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

uploady-buy-me-coffee

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}`);
    });
};

Package Sidebar

Install

npm i @rpldy/chunked-uploady

Weekly Downloads

1,636

Version

1.8.1

License

MIT

Unpacked Size

72.1 kB

Total Files

13

Last publish

Collaborators

  • yoavniran