TypeScript icon, indicating that this package has built-in type declarations

    0.18.3 • 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


       $ yarn add @rpldy/chunked-uploady
       $ npm i @rpldy/chunked-uploady

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


    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.


    Chunked Uploady provides hooks for chunk life-time events:


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


    Called when a chunk has finished uploading


    import { useChunkFinishListener } from "@rpldy/chunked-uploady";
    const MyComponent = () => {
        useChunkFinishListener(({ chunk }) => {
            console.log(`Chunk Finished - ${chunk.id} - attempt: ${chunk.attempt}`);


    npm i @rpldy/chunked-uploady

    DownloadsWeekly Downloads






    Unpacked Size

    76.1 kB

    Total Files


    Last publish


    • yoavniran