Skip to main content

Retry Failed Uploads

@rpldy/retry and its React counterpart: @rpldy/retry-hooks provide retry functionality for failed uploads.

There are 3 retry flavors: retry all, retry batch, and retry item.

These packages don't provide an UI components but rather the functionality to enable retry and the hooks that make it easy to wire-up your UI.

Example

The following code shows how to add UI elements that can trigger a retry for all 3 flavors.

import React, { useCallback, useState } from "react";
import Uploady from "@rpldy/uploady";
import retryEnhancer, { useBatchRetry, useRetry, useRetryListener } from "@rpldy/retry-hooks";

const RetryUi = () => {
const [failedItems, setFailedItems] = useState({});
const [failedBatches, setFailedBatches] = useState([]);
const retry = useRetry();
const retryBatch = useBatchRetry();

useItemErrorListener((item) => {
const itemIdentity : string = item.file ? item.file.name : item.url;

if (!failedItems[itemIdentity]) {
setFailedItems((failed) => {
return { ...failed, [itemIdentity]: item.id };
});

setFailedBatches((batches) => {
return !~batches.indexOf(item.batchId) ?
batches.concat(item.batchId) :
batches;
});
}
});

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

const onRetryAll = useCallback(() => {
retry();
}, [retry]);

const onRetryItem = useCallback((e) => {
const itemId = e.target.dataset["id"];
retry(itemId);
}, [retry]);

const onRetryBatch = useCallback((e) => {
const batchId = e.target.dataset["id"];
retryBatch(batchId);
}, [retryBatch]);

return <>

<br/>
<button id="retry-all" onClick={onRetryAll}>Retry All</button>

<section>Failed Batches:
<ul>
{failedBatches.map((bId) =>
<li style={{ cursor: "pointer" }}
key={bId}
data-id={bId}
onClick={onRetryBatch}>
{bId}
</li>)}
</ul>
</section>

<section>Failed Items:
<ul>
{Object.keys(failedItems).map((name) =>
<li style={{ cursor: "pointer" }}
key={failedItems[name]}
data-id={failedItems[name]}
onClick={onRetryItem}>
failed: ({failedItems[name]}) {name}
</li>)}
</ul>
</section>
<br/>
</>
};

export const MyApp = () => {
return <Uploady
destination={{url: "https://my-server.com/upload"}}
enhancer={retryEnhancer}>

<RetryUi />
</Uploady>
};