Expected behavior for LiveView.Upload cansel_upload/3

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?

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

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

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.

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.

4 Likes

Thanks