Deleted image breaks whole page editor

[SteinRobert]

Description

1. I create a synchronized translation of a page, including an ImageBlock- an image is chosen.
2. I delete the image as an instance under (/cms/images).
3. The synchronized page now breaks, it flashes the content for a moment and goes completely white.

The JS is breaking at this point:

Which is probably this:

wagtail-localize/wagtail_localize/static_src/common/components/ImageChooser/index.tsx

Line 46 in bb04c76

src={imageInfo.thumbnail.url}

I'd be happy to provide a solution - maybe just render - "deleted image {id}" in the widget instead of the image thumbnail?

[Nigel2392]

Did you delete the image file or the image model?
By the looks of the TS file - it should not be able to reach that without a valid ID, this would mean a reference of a model or anything would still exist somewhere.
If you deleted the image file itself - I feel that would kindof be out of scope, this isn't how people regularly do it.
Could you provide a console log?

[SteinRobert]

Here you go:

I guess something needs to be done here, not? The JS is breaking the whole page editor. The API call for the image returns a 404 which leads to the JS breaking.

[Nigel2392]

Here you go:

I guess something needs to be done here, not? The JS is breaking the whole page editor. The API call for the image returns a 404 which leads to the JS breaking.

Sorry to ask again - did you delete the image file itself, or the model image instance in the database?

[SteinRobert]

Sorry overlooked. As mentioned:

I delete the image as an instance under (/cms/images).

The image model instance was deleted through the wagtail ui.

[danthedeckie]

I can confirm, same behaviour here.

[zerolab]

Sorry all, I somehow missed this one.
If anyone has the time, a PR will be most welcome

[Nigel2392]

Possibly some sort of DB constraint should be enforced to prevent this somehow? Don't have time either but might be helpful.

[zerolab]

Possibly some sort of DB constraint should be enforced to prevent this somehow?

it is complicated. In that you should be able to remove stuff without everything exploding. I think in this case it is to do with localize trying to access properties that are not available for the widget, and it doesn't do that gracefully

[zerolab]

The issues is with

wagtail-localize/wagtail_localize/static_src/common/components/ImageChooser/index.tsx

Line 31 in caf14b8

.then(setImageInfo);

-- which doesn't check for non-20x responses before setting the image info object which is used below (example) to render the preview image