I am not sure if something is missing and would appreciate ideas/hints on what to check
Solutions
Solution to missing info in @upload assigns:
As @Xty mentioned below, a phx-change is required on the form (which can simply return {:noreply, socket}) to properly update the @uploads assign.
It’s hard to tell if the code samples you’ve provided are complete or boiled down examples, but I’m fairly sure that the LiveView upload features are expected to be used from within a form element.
Have you tried putting the live_file_input inside of a form? If not, I think that would be a good place to start.
Another thing that has caused me issues with live uploads is not having a phx-change handler on the form. Even if that handler does nothing but respond {:noreply, socket} it’s still needed for live uploads.
I’d recommend reading through the official documentation if you haven’t, it should cover everything you need and is likely more up-to-date than the videos you’ve mentioned.
I just tested this with my Chrome file inputs, because I’ve had no problems clicking it, and realised that I’m using a label element in place of your div.
When I change my element to div, drop works but click stops working. Even the section element in the Upload Entries doc example doesn’t work with Chrome. This is either a browser bug or something in the live_view.js, not really sure.
I use this code and it works in safari and chrome (I use bootstrap for css). I had an error which says some id does not match on upload - but that was because I was creating two livesockets in a single page due two different js files(which I included by mistake).
Also I had to add phx-change="validate" for validate to trigger.
<form id="upload-form" phx-submit="save" phx-change="validate">
<div class="border d-flex align-items-center justify-content-center mb-3" phx-drop-target={@uploads.cassette.ref}>
<%= live_file_input @uploads.cassette, class: "visually-hidden", tabindex: "0" %>
<.icon class="bi-upload" size="3"></.icon>
<.div px_3>Drag And Drop Cassettes</.div>
</div>
<section>
<%# render each avatar entry %>
<%= for entry <- @uploads.cassette.entries do %>
<article class="upload-entry">
<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">×</button>
<%# Phoenix.LiveView.Helpers.upload_errors/2 returns a list of error atoms %>
<%= for err <- upload_errors(@uploads.cassette, entry) do %>
<.alert danger><%= error_to_string(err) %></.alert>
<% end %>
</article>
<% end %>
<%# Phoenix.LiveView.Helpers.upload_errors/1 returns a list of error atoms %>
<%= for err <- upload_errors(@uploads.cassette) do %>
<.alert danger><%= error_to_string(err) %></.alert>
<% end %>
</section>
<%= if @uploads.cassette.entries != [] do %>
<.button submit primary>Upload</.button>
<% end %>
</form>