Files with auto upload with drag and drop getting stuck with no upload

[carflynn2009]

Environment

• Elixir version (1.12.2 OTP 24):
• Phoenix version (1.5.7):
• Phoenix LiveView version (0.15.3):
• Operating system: MacOS
• Browsers you attempted to reproduce this bug on (Chrome):
• Does the problem persist after removing "assets/node_modules" and trying again? Yes:

Actual behavior

When using uploads with the following setup

allow_upload(:photo,
  accept: ~w(.png .jpg .jpeg),
  auto_upload: true,
  chunk_size: 1_024,
  max_file_size: 10_000_000,
  max_entries: 1,
  progress: &handle_progress/3,
  external: &presigned_upload/2
)

combined with phx-drop-target="<%= @uploads.photo.ref %>"

When draging files to be auto uploaded that generate errors such as :too_many_files or :not_accepted and after removing the files untill there are no errors then the files are not auto uploaded and are left stuck in the view and requires a reload to clear them

Expected behavior

Once all of the files have been removed that were causing the errors then the remaining files should be picked up and auto uploaded

[mcrumm]

Hi @carflynn2009! I think this was fixed in #1538 – released in 0.15.4. Can you try updating your point release and see if that fixes it?

[carflynn2009]

@mcrumm i am now running :phoenix_live_view, "0.15.5" and it has not changes the behaviour, it seems when there is any errors on screen the auto upload just does not kick in even after removing the files causing the errors (a mixture of too many files and incompatible file type). The presigned_upload never gets called

The expected behaviour does however work when you don't use auto upload and instead have a submit button, however for my use-case i need to use the auto upload function.

When clearing these files i would have expected the validate handle event to be fired each time but it is not.

[linusdm]

I’m seeing similar behaviour in my case: when I drop an unaccepted file (a file with an extension not in the :accept option of allow_upload/3), the file appears in the @upload assign with an error of type :not_accepted. So far so good. But then immediately after being in this situation (same LiveView), I can’t upload any other subsequent files that are acceptable. They seem to pile up, because when I use cancel_upload/3 for the files in error, the handle_progress/3 callback is called when another correct file is uploaded (the handle_progress/3 callback isn’t automatically triggered after calling cancel_upload/3 though, so it has to be “forced” with another upload, which is not at all the behaviour that I expected). I also have auto uploads enabled.

Can I automatically cancel files that are not allowed? For me it would be totally fine to just ignore the files with a wrong extension, without any notice. As long as the subsequent files (and any correct files that were dropped alongside the wrong file) are uploaded as usual, triggering the handle_progress callback.

I tested in LiveView version 0.18.3, so I think this is still an issue.

[chrismccord]

An working example of mixed valid/invalid files drag and dropped and canceling on the fly can be found here: https://github.com/fly-apps/live_beats/blob/master/lib/live_beats_web/live/profile_live/upload_form_component.ex#LL43C16-L43C28

Without an example that exhibits the behavior it's hard to say what's going on, but compare the LiveBeats example and let us know. Thanks!