@rpldy/chunked-uploady
    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

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

    Install

    npm i @rpldy/chunked-uploady

    DownloadsWeekly Downloads

    642

    Version

    0.18.3

    License

    MIT

    Unpacked Size

    76.1 kB

    Total Files

    13

    Last publish

    Collaborators

    • yoavniran