Skip to content

live_file_input and live_img_preview entries empty #4091

@manu1080

Description

@manu1080
  • Elixir version: 1.19.1 (compiled with Erlang/OTP 26)
  • Phoenix and LiveView versions:
    • phoenix 1.7.21
    • phoenix_live_view 1.0.17
  • Operating system:
    • macOS (works)
    • Android (fails)
  • Browsers:
    • Chrome Android (fails) ❌
    • Firefox Android (works) ✅
    • Chrome Desktop (works) ✅

Problem

live_file_input does not populate @uploads.images.entries on Chrome Android in production,
while the exact same code works on localhost (same Android device) and on Firefox Android.

Actual behavior

  1. User selects image file via <.live_file_input />
  2. File picker opens and file is selected ✅
  3. phx-change="validate" event fires ✅
  4. But @uploads.images.entries remains empty (count: 0) ❌
  5. No errors in upload_errors(@uploads.images)

Expected behavior

After selecting a file, @uploads.images.entries should contain the selected file(s).

Code

# Component
def mount(socket) do
  {:ok,
   socket
   |> allow_upload(:images,
     accept: :any,
     max_entries: 20,
     max_file_size: 20_000_000,
     auto_upload: false
   )}
end

def handle_event("validate", _params, socket) do
  Logger.info("entries count: #{length(socket.assigns.uploads.images.entries)}")
  {:noreply, socket}
end
# Template

<.simple_form for={@form} phx-target={@myself} phx-change="validate">
  <.live_file_input upload={@uploads.images} />
</.simple_form>

<%= for entry <- @uploads.images.entries do %>
  <div id={"preview-#{entry.ref}"} phx-update="ignore">
    <.live_img_preview entry={entry} />
  </div>
<% end %>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions