Somehow, I cannot manage to get file uploads to work.

I have read the docs and watched the videos from Chris and also a tutorial at pragmatic studio.

So far, I understand the following:

1. I need to allow file uploads:

   def mount(params, session, socket) do
     {:ok, socket |> allow_upload(:csv, accept: ~w(.csv), max_entries: 1)}
   end
   

   This will add an @uploads assign that holds a description of the constraints and, once selected, files and upload progress.
2. And can use the live_file_input to render a file upload button:

   def render(assigns) do
     ~F"""
       <form id="id" for={:data} phx-submit="upload">
         <div class="ui segment" phx-drop-target={@uploads.csv.ref}>
           {live_file_input @uploads.csv}
          </div>
          <p>{inspect @uploads.csv}</p>
          <Button text={gettext "Upload"} icon="upload" extra_attributes="labeled violet"/>
        </form>
     """
   end
   

   Note: Im using Surface UI with Phoenix Live View 0.16.4
   This renders a “Choose File…” button as expected and shows no file selected next to it.
3. Consume an upload using consume_uploaded_entries. I did not get to this point.

Expectations

With the setup above, I expected

1. Clicking the “Choose File” button opens a file selector and
2. when rendering @uploads.csv after selecting a file it contains information on the selected file in its :entry field.

What happens

1. Clicking the “Choose File” button does not do anything in Chrome. In Safari, a file browser is opened.
2. After selecting a file in Safari, the @uploads assign seems to not contain anything (<p>{inspect @uploads.csv}</p>):

   #Phoenix.LiveView.UploadConfig<
    accept: ".csv", auto_upload?: false, entries: [], errors: [], max_entries: 1, max_file_size: 8000000, name: :csv, progress_event: nil, ref: "phx-FtoOkG01s4jRVQ-F", ...
   >
   

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.