live_file_input component and multiple files not validating for submitting

ghenry commented 2 weeks ago

Environment

Elixir version (elixir -v): Erlang/OTP 26 [erts-14.2.5] [source] [64-bit] [smp:12:12] [ds:12:12:10] [async-threads:1] [jit:ns] Elixir 1.16.2 (compiled with Erlang/OTP 26)
Phoenix version (mix deps): phoenix (Hex package) (mix) locked at 1.7.14 (phoenix) c7859bc5
Phoenix LiveView version (mix deps): phoenix_live_view (Hex package) (mix) locked at 0.20.15 (phoenix_live_view) 45c48ad1
Operating system: Fedora 40 x86_64 Workstation
Browsers you attempted to reproduce this bug on (the more the merrier): Firefox and Chrome latest
Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: Yes, same

Actual behavior

Multiple files are accepted, but input field shows "Please select file" when Submit is clicked. When switching back to max_entries: 1, all is OK.

20240620_161612

<div
              id="dropzone"
              class="mt-2 flex justify-center cursor-pointer rounded-lg border border-dashed border-gray-900/25 px-6 py-10"
              phx-drop-target={@uploads.loa.ref}
              phx-click={JS.dispatch("click", to: "##{@uploads.loa.ref}", bubbles: false)}
              phx-hook="ResiSwitchPdfPreview"
            >
              <div class="text-center">
                <svg
                  viewBox="0 0 512 512"
                  class="mx-auto h-12 w-12 text-gray-300"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  aria-hidden="true"
                >
                  >
                  <path
                    fill-rule="evenodd"
                    d="M0 64C0 28.7 28.7 0 64 0H224V128c0 17.7 14.3 32 32 32H384V304H176c-35.3 0-64 28.7-64 64V512H64c-35.3 0-64-28.7-64-64V64zm384 64H256V0L384 128zM176 352h32c30.9 0 56 25.1 56 56s-25.1 56-56 56H192v32c0 8.8-7.2 16-16 16s-16-7.2-16-16V448 368c0-8.8 7.2-16 16-16zm32 80c13.3 0 24-10.7 24-24s-10.7-24-24-24H192v48h16zm96-80h32c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H304c-8.8 0-16-7.2-16-16V368c0-8.8 7.2-16 16-16zm32 128c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H320v96h16zm80-112c0-8.8 7.2-16 16-16h48c8.8 0 16 7.2 16 16s-7.2 16-16 16H448v32h32c8.8 0 16 7.2 16 16s-7.2 16-16 16H448v48c0 8.8-7.2 16-16 16s-16-7.2-16-16V432 368z"
                    clip-rule="evenodd"
                  />
                </svg>
                <div class="mt-4 text-sm leading-6 text-gray-600">
                  <label
                    for={@uploads.loa.ref}
                    class="relative cursor-pointer rounded-md bg-white font-semibold text-indigo-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-600 focus-within:ring-offset-2 hover:text-indigo-500"
                  >
                    <span>Upload a PDF</span>
                  </label>
                  <.live_file_input upload={@uploads.loa} required class="sr-only" />
                  <p class="pl-1">or drag and drop up to 10MB</p>
                </div>
              </div>
            </div>

Screenshot from 2024-06-20 16-15-14

Expected behavior

Submit works and multiple files are uploaded.

Thanks for taking the time to read this and for the wonderful Phoenix and Phoenix LiveView.

SteffenDE commented 2 weeks ago

Please try to update LV, 0.20.15 had a bug with patching form contents.

ghenry commented 2 weeks ago

Hi @SteffenDE

I'm on 0.20.17 now, exactly the same. I can't see that I've missed any config or code changes to handle this. The only difference I can see that is needed is going from max_entries: 1 to max_entries: 5 etc.

The multiple attribute is there on the input field as expected:

<input data-phx-id="m35-phx-F9sMyDH-COEVCCKB" id="phx-F9tJDY1mkBgfEbmI" type="file" name="loa" accept=".pdf" data-phx-hook="Phoenix.LiveFileUpload" data-phx-update="ignore" data-phx-upload-ref="phx-F9tJDY1mkBgfEbmI" data-phx-active-refs="" data-phx-done-refs="" data-phx-preflighted-refs="" required="" class="sr-only" multiple="">

Thanks.

ghenry commented 1 week ago

Any ideas?

SteffenDE commented 1 week ago

@ghenry Sorry, I'm very busy at the moment and didn't have the time to look into it yet. It'd be great if you could create a single file script to reproduce the problem. This should be a good start: https://github.com/phoenixframework/phoenix_live_view/blob/main/.github/single-file-samples/main.exs

ghenry commented 1 week ago

Will do. That will also allow me to prove if I've got some cruft blocking this simple thing from working.

phoenixframework / phoenix_live_view