Gallery-block: adds images even though upload fails

[saulirajala]

Describe the bug
Issue happens when one uploads from computer for example four images: File size of two images are too large, but the other two images are ok. So the result is that two images are uploaded to media library, but two are not.

Yet Gallery -block seems to assume that there are four images in the gallery and "replicates" the two images that were uploaded to media library (see screenshot 1). After reload of the page, gallery-block has two broken images (screenshot 2) and there are errors in console of browser:
GET blob:http://gutenberg.test/88f7c6cd-fe07-475a-8f87-af7bda580c3f net::ERR_FILE_NOT_FOUND
GET blob:http://gutenberg.test/2ce3c7bb-aa28-4187-811e-95e3cbfd3815 net::ERR_FILE_NOT_FOUND

To Reproduce
Steps to reproduce the behavior:

1. Add Gallery-block
2. Click Upload -button
3. Choose two images with too large image size and two ok images
4. See how gallery "replicates" the images, that were ok
5. Reload site
6. Gallery has now two broken images and two ok-images

Expected behavior
Only the images that were actually uploaded to media library, should be added to gallery-block.

Screenshots
Screenshot 1:

Screenshot 2:

Desktop (please complete the following information):

• OS: macOS Sierra
• Browser Chrome
• Version 69.0.3497.100

Additional context

• Gutenberg version 3.9.0 (current master)

[ChrissiePollock]

I tested this in Firefox using a local environment as well as Chrome and Safari. I get the same results in all three browsers.

I downloaded four images from https://unsplash.com/s/photos/large. Their sizes were: 3.1 MB, 2.1 MB, 3.9 MB and 5.6 MB.

I did not get the same error message as described in the initial post, but I still had errors.

At first it looked like me images were adding:

Then I was shown an error:

On Preview, only two images appeared:

It was not obvious from the error message that the images were too large.

[adamziel]

A similar problem occurs when you save the post while some of the images are still being uploaded.

[aaronrobertshaw]

With all the recent work done around refactoring the Gallery to use nested blocks, now is as good a time as any to see if this is still an issue.

Original gallery

Using the original gallery and setting a 4Mb upload limit, I was not able to replicate the issues described here.

I tried initially with my own images where multiple images were over the limit and some under. Only those under the upload limit were added to the gallery and an error message for the others was displayed. So for me, the original issue described is no longer a problem.

Following that, I tested with the images supplied by @ChrissiePollock. The gallery returned an appropriate error message and only displayed the valid images.

No errors were thrown when attempting to save while images were still uploading either.

At this stage, the original gallery is looking good.

Refactored Gallery (using nested inner image blocks)

After turning on the refactored gallery block experiment and repeating the tests I did experience one problem though.

There was no error displayed when attempting to upload an image over the size limit. The image block continues to display the loading spinner, as does the gallery's image size control. I left the editor open for several minutes and didn't see any errors or timeout messages appear.

Screen.Recording.2021-08-26.at.5.08.00.pm.mp4

There is a project board tracking issues and follow up tasks for the gallery. I'll add this issue there.