Is any event available to listen for all uploads completed

[vinodkhandelwal]

Hi,

Does Uploader has any event which can be listened on when all files added has been uploaded. Here is the scenario -

uploader.add(file_1);
uploader.add(file_2);
uploader.add([file_3, file_4]);

Now i want to have an event like -

uploader.on(UPLOADER_EVENTS.ALL_ITEM_FINISH, () => {
            history.push(ROUTES.HOME);
      }
});

Currently i have made a hack by listening UPLOADER_EVENTS.ITEM_FINISH and increasing count every time this is called and then compare with total number of files i am uploading.

[yoavniran]

this is pretty much a duplicate of #123
As explained there, its not something that Uploady tracks as uploads are asynchronous and files can be added at any point in time. With or without autoUpload

It is therefore a conscious design decision not to add this event type to Uploady. Its not something I feel should be the responsibility of the library internals (and can be tricky to implement).

That said, a 3rd party enhancer can be written that adds this functionality as a community driven feature.

[mnts-i]

I am a little bit late but I wanted to share my solution. What I did was to store the entries and the uploading flag in state:

const [entries, setEntries] = useState<BatchItem[]>([]);
const [uploading, setUploading] = useState(false);

and calculate how many pending items exist in my state:

const pendingEntries = useMemo(() => entries.reduce((acc, entry) => entry.state === FILE_STATES.PENDING ? acc + 1 : acc, 0), [entries]);

I then update the entries state during the following events:

• batchAdd events: I concat the new batch's items into the existing items

setEntries((oldEntries) => ([...batch.items, ...oldEntries]));

• batchFinalize event I iterate through the entries / items and update them (We'll need to update their state - for the above mentioned pendingEntries variable - but I just chose to update the whole item)

(batch: Batch) => {
	setEntries((oldEntries) => {
		batch.items.forEach((item) => {
			const entryIdx = oldEntries.findIndex((entry) => entry.id === item.id);

			if (entryIdx !== -1) {
				oldEntries[entryIdx] = item;
			}
		});

		return [...oldEntries];
	});
}

I listen to the itemStart event where I just set the uploading flag / state to true:

() => { 
	setUploading(true);
}

The final touch is a simple useEffect hook with the following logic:

useEffect(() => {
	if (uploading && pendingEntries === 0) {
		setUploading(false);
	}
}, [pendingEntries, uploading]);

The key is to keep the entries state in-sync with your application logic. In my case I always have autoUpload to false and the user uploads the files by clicking a button and he can also remove pending files before (but NOT during) the upload where I also make sure to abort and remove it also from my state.