Skip to main content

Dynamically Cancel Uploads

It's possible to cancel an upload programmatically using the *_START events.

These events are considered "Cancellable". A cancelleable event can be cancelled when its handler returns false

In React you can more easily do this by using hooks but can also do this by registering event callbacks.

Examples

Cancel Upload using useBatchStartListener

note

A component using this hook should be wrapped by an <Uploady> component


import React from "react";
import { useBatchStartListener } from "@rpldy/uploady";
import UploadButton from "@rpldy/upload-button";

const MyUploadButton = () => {
useBatchStartListener((batch) => {
//cancel any batch with more than 10 items
return (batch.items.length <= 10);
});

return <UploadButton/>;
};

Cancel Upload using useItemStartListener hook

note

A component using this hook should be wrapped by an <Uploady> component


import React from "react";
import { useItemStartListener } from "@rpldy/uploady";
import UploadButton from "@rpldy/upload-button";

const MyUploadButton = () => {
useItemStartListener((item) => {
//cancel any item representing a file upload with name containing "XXX"
const name = item.file ? item.file.name : item.url;
return name.indexOf("XXX") === -1;
});

return <UploadButton/>;
};

Cancel Upload using event listener

Event hooks are convenience helpers around Uploader events

Event handlers can be passed to the Uploady instance and can also cancel uploads programmatically.


import React from "react";
import Uploady, { UPLOADER_EVENTS } from "@rpldy/uploady";

const MyApp = () => {
const listeners = useMemo(() => ({
[UPLOADER_EVENTS.BATCH_START]: (batch) => {
//cancel any batch with more than 10 items
return (batch.items.length <= 10);
}
}, []));

return <Uploady
destination={{url: "https://my-server.com/upload"}}
listeners={listeners}>
{/* rest of my app */}
</Uploady>
};