`live_img_preview` intermittently renders a broken image

[monooso]

Environment

• Elixir version (elixir -v): 1.18.2
• Phoenix version (mix deps): 1.8.0
• Phoenix LiveView version (mix deps): 1.1.8
• Operating system: macOS, Linux (Fedora), iOS, and Android
• Browsers you attempted to reproduce this bug on: Brave, Chrome, Firefox, Safari
• Does the problem persist after removing "assets/node_modules" and trying again?: We don't have an assets/node_modules directory.

Actual behavior

The live_img_preview component occasionally renders a broken image. This only appears to happen when multiple images are selected.

We have confirmed that:

• The issue is not related to a particular image, image type, or image size. Sometimes an image will display the preview just fine, other times the same image will be broken.
• The issue is not related to the order in which the images are selected.
• The issue is not related to the order in which the images are displayed. Sometimes the first image is broken, sometimes the third, etc.
• The issue is not related to the number of selected images (provided it is greater than one).

Inspecting the source, it's clear that the LiveImgPreview hook is not setting the src attribute for the offending image. Here is the corresponding console error message:

Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.
    at _LiveUploader.getEntryDataURL (live_uploader.js:29:18)
    at _ViewHook.mounted (hooks.js:47:20)
    at _ViewHook.__mounted (view_hook.ts:350:10)
    at _View.maybeAddNewHook (view.js:604:15)
    at view.js:620:12
    at dom_patch.js:73:58
    at Array.forEach (<anonymous>)
    at DOMPatch.trackAfter (dom_patch.js:73:36)
    at dom_patch.js:536:32
    at Array.forEach (<anonymous>)
getEntryDataURL	@	live_uploader.js:29
mounted	        @	hooks.js:47
__mounted	@	view_hook.ts:350
maybeAddNewHook	@	view.js:604
(anonymous)	@	view.js:620
(anonymous)	@	dom_patch.js:73
trackAfter	@	dom_patch.js:73
(anonymous)	@	dom_patch.js:536
perform	        @	dom_patch.js:536
performPatch	@	view.js:658
(anonymous)	@	view.js:874
time	        @	live_socket.js:257
update	        @	view.js:871
(anonymous)	@	view.js:1293
applyDiff	@	view.js:396
(anonymous)	@	view.js:1289
after	        @	live_socket.js:1279
requestDOMUpdate@	live_socket.js:276
ok	        @	view.js:1288
(anonymous)	@	view.js:1236
withLatency	@	view.js:1231
(anonymous)	@	view.js:1236
(anonymous)	@	push.js:76
matchReceive	@	push.js:76
(anonymous)	@	push.js:107
trigger	        @	channel.js:278
(anonymous)	@	channel.js:70
trigger	        @	channel.js:278
(anonymous)	@	socket.js:650
decode	        @	serializer.js:25
onConnMessage	@	socket.js:637
conn.onmessage	@	socket.js:368

Expected behavior

The live_img_preview component should display a preview image for every selected image.

[SteffenDE]

Thank you for reporting this! It would help us a lot if you could try to create a single file script with a LiveView that reproduces that error. You can use https://github.com/phoenixframework/phoenix_live_view/blob/main/.github/single-file-samples/main.exs as a starting point. Let me know if you don't have the time to do it. I'll still look into this, but it'll take more time since I need to come up with a reproduction first!