Live image preview storing

ken-kost

I have a modal with form and live image upload which uploads selected image on form submit. Also on the form a button for submodal can appear which opens another modal on top of form modal and after closing it you get back to the form. All the changes will remain, except for the image preview which is not in changeset but in uploads.

What I want is the selected image preview remains after submodal close. One of my attempts was to store the entry in changeset i put it back on load/change, which worked but it did not solve my issue.

So I dug deeper and as far as I understand, when I call live_img_preview which calls content_tag with data_phx_entry_ref which is used deep in the javascript live_uploader.js

static getEntryDataURL(inputEl, ref, callback){
    let file = this.activeFiles(inputEl).find(file => this.genFileRef(file) === ref)
    callback(URL.createObjectURL(file))
  }

And then I get the error

Uncaught TypeError: URL.createObjectURL: Argument 1 is not valid for any of the 1-argument overloads.
    getEntryDataURL live_uploader.js:28
    mounted hooks.js:36
    __mounted view_hook.js:17
    performPatch view.js:341
    trackAfter dom_patch.js:59
    trackAfter dom_patch.js:59
    perform dom_patch.js:191
    perform dom_patch.js:191
    performPatch view.js:362
    update view.js:451
    time live_socket.js:208
    update view.js:448
    applyPendingUpdates view.js:503
    applyPendingUpdates view.js:503
    pushLinkPatch view.js:964
    pushWithReply view.js:636
    matchReceive push.js:76
    matchReceive push.js:76
    startTimeout push.js:107
    trigger channel.js:278
    Channel channel.js:70
    trigger channel.js:278
    onConnMessage socket.js:510
    decode serializer.js:25
    onConnMessage socket.js:497
    onmessage socket.js:221
    connect socket.js:221
    doConnect live_socket.js:191
    connect live_socket.js:195
    <anonymous> app.js:46
    <anonymous> app.js:4396
live_uploader.js:28:17
    getEntryDataURL live_uploader.js:28
    mounted hooks.js:36
    __mounted view_hook.js:17
    performPatch view.js:341
    trackAfter dom_patch.js:59
    forEach self-hosted:164
    trackAfter dom_patch.js:59
    perform dom_patch.js:191
    forEach self-hosted:164
    perform dom_patch.js:191
    performPatch view.js:362
    update view.js:451
    time live_socket.js:208
    update view.js:448
    applyPendingUpdates view.js:503
    forEach self-hosted:164
    applyPendingUpdates view.js:503
    pushLinkPatch view.js:964
    pushWithReply view.js:636
    matchReceive push.js:76
    forEach self-hosted:164
    matchReceive push.js:76
    startTimeout push.js:107
    trigger channel.js:278
    Channel channel.js:70
    trigger channel.js:278
    onConnMessage socket.js:510
    decode serializer.js:25
    decode self-hosted:1151
    onConnMessage socket.js:497
    onmessage socket.js:221
    (Async: EventHandlerNonNull)
    connect socket.js:221
    doConnect live_socket.js:191
    connect live_socket.js:195
    <anonymous> app.js:46
    <anonymous> app.js:4396

I googled the error, one response is

that createObjectUrl is deprecated.

window.URL.createObjectURL(file) Replace with window.URL.srcObject = file

But I’m not sure if that’s the issue, or that the file disappears after changing modal/route.

phoenix liveview

3 comments

/phoenix #image #liveview

2 1546 3

2023-12-21 11:54:00 UTC

Showing Posts 1 to 3

Show Best Posts
Show All (oldest first)
Show All (newest first)

LostKobrakai

For uploads LV maintains a lot more state than you get to interact with (including tmp files and such). Therefore you cannot just set values back like with a changeset. If those entries are to be maintained you want to go for a strategy where LV never get’s rid of those entries in the first place. That might be possible by patching between modals and keeping the upload allowed on both, but I’m not sure about that.

Post #1

i-n-g-m-a-r

Did you find a solution?

This thing does not fail nicely.

Screenshot from 2023-12-21 09-10-40

Maybe there’s some way to clean up previews?
Or maybe file should be validated before calling URL.createObjectURL

Post #2

i-n-g-m-a-r

This works for me.

def upload_names, do: [:name_a, :name_b, :etc]

def cleanup_previews(socket) do
  Enum.reduce upload_names(), socket, fn n, s ->
    {_completed, in_progress} = uploaded_entries(s, n)

    Enum.reduce in_progress, s, fn e, s ->
      cancel_upload(s, n, e.ref)
    end
  end
end

Post #3

— All posts loaded —