Retry-Hooks

This package exposes useful hooks for the @rpldy/retry package which adds upload retry capabilities to the uploader.

It makes it easy to use retry from a React UI application.

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

Installation

#Yarn: 
   $ yarn add @rpldy/uploady @rpldy/retry-hooks

#NPM:
   $ npm i @rpldy/uploady @rpldy/retry-hooks

Enabling Retry

To enable retries for your Uploady instance, you need to use the provided (uploader enhancer): retryEnhancer.

import Uploady from "@rpldy/uploady";
import retryEnhancer from "@rpldy/retry-hooks";
import UploadButton from "@rpldy/upload-button";

const App = () => {
    return <Uploady 
              destination={{ url: "my-server.com/upload" }}
              enhancer={retryEnhancer}
           >
              <UploadButton/>
           </Uploady>;               
};

This will add the retry capability for failed uploads.

See below how to use hooks in order to trigger a retry

Events

Retry related events.

Registering to handle events can be done using the uploader's on() and once() methods. Unregistering can be done using off() or by the return value of both on() and once().

RETRY_EVENT

Triggered when files are re-added to the queue for retry.

• Parameters: ({ uploads: BatchItem[], options?: UploadOptions })

uploads is an array of batch items. options are the (optional) upload options that are passed to the retry call

Hooks

useRetry

Returns a retry function.

When called without a parameter, will attempt retry all failed uploads. When called with a (id) parameter, will attempt retry for the failed batch-item identified by the id.

import React from "react";
import { useRetry } from "@rpldy/retry-hooks";

const MyComponent = ( ) => {
    const retry = useRetry();

    const onClick = () => {
        retry("i-123");
    };

    return <button onClick={onClick}>retry item</button>;
};

useBatchRetry

Returns a batch retry function.

When called with a batch id, will attempt retry for all failed items in that batch.

import React from "react";
import { useBatchRetry } from "@rpldy/retry-hooks";

const MyComponent = ( ) => {
    const retryBatch = useBatchRetry();

    const onClick = () => {
        retryBatch("b-123");
    };

    return <button onClick={onClick}>retry batch</button>;
};

useRetryListener

Called when items are sent to be re-uploaded (retry)

see RETRY_EVENT

import React from "react";
import { useRetryListener } from "@rpldy/retry-hooks";

const MyComponent = ( ) => {
    
    useRetryListener(({ items }) => {
        console.log("##### RETRY EVENT - retrying items: ", items);
    });

    return <div/>;
};