Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Add an error state to the image block to allow upload errors to display #10224
Adds an error state to the image block to display errors that have occurred when a file fails to upload. This is an issue when a file is dropped into the editor or onto an empty image block, so the media library modal is not used.
Uses the existing noticeOperations methods for creating and displaying the errors passed back from the mediaUpload component.
Fixes #10191 as well a similar issue I discovered when an image of an improper format (.psd) was used.
How has this been tested?
Open the editor and try to drag an image that is larger than the max file upload limit.
Types of changes
Adds a hasError variable to the state of the image block component.
@jorgefilipecosta thanks for the feedback! I tried it the way you had suggested and that also displays the error, but there was a noticeable delay before the error message showed up. It seems almost like the file was complete uploaded before displaying the error? With the flag in the state, it shows the error almost instantaneously, which seems like maybe a better user experience.
I don't entirely understand why your suggestion should slow the error displaying, so maybe I am doing something wrong. I modeled the hasError flag off of @noisysocks implementation of the file block, maybe he would have some insight?
In looking into it a little bit more last night, it looks like the url gets set to a blob on the start of upload, and updated as the upload processes? I'm thinking it doesn't get set to undefined and stay until after it is finished uplaoding. With the state variable, it displays the error while the file is still getting uploaded, because it doesn't care what the url is set to. Again, very new to the gutenberg code so feel free to correct if I am mistaken.
The image block has changed a bit since I wrote the original bug fix but the error is still occurring. I merged master back into this branch so it is able to be merged and updated the code to simplify it a little bit. Since @talldan and @imath added the isEditing bit to the state in #9264, I rewrote my hasError addition to use that instead, does that clear up your concerns about this @jorgefilipecosta ?