[Multiple upload] JavaScript error: TypeError document.getElementById() is null

Steps to reproduce this issue

Open image multiple add form
Load a lot of images into the uppy dashboard (> 50 images)
Fill in the required fields in the right-hand form
Open the javascript console of the browser
Start the upload by pressing the upload button

Expected behavior

All images gets uploaded and saved based on the configurations set.

Actual behavior

After uploading some images (could be the first one or any other) an JavaScript error is thrown. grafik

Additional comments

Inside the uppy.on('upload', (data) => {} function, we are looping through all files in the upload list and get the corresponding DOM elements of the file previews. This is done using let item = document.getElementById('uppy_'+data.fileIDs[i]);. Somehow this elements are not available and the item is null. The same happens inside the uppy.on('upload-success', (file, response) => {} function.

If the first function throws the error, the upload stops immediately. If the latter function throws all uploads are successful, but the saving process stops at this point.

This results in a very confusing and unlogical error pattern...

Possible way of fixing it

Creating an uppy PostProcessing plugin to perfom the save ajax request.
Create an uppy UI plugin to modify the appearence of the previews in the dashboard according to the current uppy state.

JoomGalleryfriends / JG4-dev