Expected behavior for LiveView.Upload cansel_upload/3

polypush135 · May 15, 2022, 6:42pm

Starting with a very basic blog post example app. GitHub - joshchernoff/liveview_uploader_example: Trying to understand the behavior of cancel_upload/3

I generated a liveview Post where I added a upload for image and added a cancel_upload button on the entries.

Most of this was based on the docs from Uploads — Phoenix LiveView v0.17.9

I outline the error in the repo example but in short it never seems that cancel_upload/3 from Phoenix.LiveView.Upload would ever work. What am I missing?

LostKobrakai · May 15, 2022, 7:22pm

Is there a reason to allow_upload on the parent LV instead of the component with the form?

polypush135 · May 15, 2022, 8:05pm

Yes because if you notice I’m not using a phx-target on the button.

github.com

joshchernoff/liveview_uploader_example/blob/709c58916caf5d25f3bfe2e462fddcc92873c284/lib/my_app_web/live/post_live/form_component.html.heex#L35

      
        
                <figure>
                  <%# Phoenix.LiveView.Helpers.live_img_preview/2 renders a client-side preview %>
                  <%= live_img_preview entry %>
                  <figcaption><%= entry.client_name %></figcaption>
                </figure>
              
                <%# entry.progress will update automatically for in-flight entries %>
                <progress value={entry.progress} max="100"> <%= entry.progress %>% </progress>
              
                <%# a regular click event whose handler will invoke Phoenix.LiveView.cancel_upload/3 %>
                <button phx-click="cancel-upload" phx-value-ref={entry.ref} aria-label="cancel">&times;</button>
              
                <%# Phoenix.LiveView.Helpers.upload_errors/2 returns a list of error atoms %>
                <%= for err <- upload_errors(@uploads.image, entry) do %>
                  <p class="alert alert-danger"><%= error_to_string(err) %></p>
                <% end %>
              
              </article>
            <% end %>
            
            
<%# Phoenix.LiveView.Helpers.upload_errors/1 returns a list of error atoms %>

Thats because first I would have to try and target the form-component. If I tried phx-target={@myself that will still target the Form LV not the form component. Also if I set it to something explicit like the root component dom ID. it will end up just triggering the form submit.

I struggled with this for little while so I just ended up going with the flow since inherent target seems to want to fire off the Form LV I just went with it. That said I’m not sure if thats not the issue because as I state I never see the entries hydrated before cancel_upload is called.

03juan · May 15, 2022, 8:54pm

If you don’t specify a type for a button inside a form like <button type="button"> then the standard browser behaviour is to assume it’s a submit. Adding the type and phx-target={@myself} to it should send the message to the form live component without triggering the form submit.

polypush135 · May 16, 2022, 12:00am

Thanks