Upload input is not being cleared after files are uploaded when used on LiveComponent

[hubertlepicki]

If you try LiveUpload demo by @mcrumm here https://github.com/mcrumm/live_upload_example you will see two different behaviours on the "Basic Demo" and "Component Demo".

On the "Basic Demo", whenever a file upload finishes, the input field is cleared of the filename. This is consistent with the docs, which state that when you consume the uploaded files their entries will be removed. And it works as advertised if you use LiveUpload with LiveView directly.

When you go to "Component Demo" you will see, however, that the file upload input is not being cleared after file is uploaded. The file name stays visible. I am using Chrome 90, but probably this is present in other browsers too. See the video showing the issue:

liveupload-.5.mp4

ElixirForum thread for more info:
https://elixirforum.com/t/reset-live-file-input-after-file-has-been-uploaded/39154

[mcrumm]

Hi @hubertlepicki - in the future, please use the provided issue template when creating new issues, thanks!

I can confirm the same problem exists in Firefox and Safari, too :)

• Elixir version (elixir -v): 1.11.1 (compiled with Erlang/OTP 23)
• Phoenix version (mix deps): 1.5.8
• Phoenix LiveView version (mix deps): 0.15.5
• NodeJS version (node -v): v12.11.0
• NPM version (npm -v): 6.11.3
• Operating system: MacOS
• Browsers you attempted to reproduce this bug on (the more the merrier): Chrome, Firefox, Safari
• Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: Yes

[hubertlepicki]

For the future reference, from the thread:

@mcrumm:

Aha! This issue is a little different than I thought it was, and the difference was further obfuscated by the differences in my examples– this affects any live_file_input when max_entries: 1.

When max_entries: 1, the input value is never cleared. You can modify the Basic Uploads demo to verify.

On the JS side, when input.multiple is true, its value gets reset. We likely need to reset the value when after the form submit too, but I need to dig a bit deeper. Stay tuned! :slight_smile:

[hubertlepicki]

So I confirm that if I alter the config to have max_entries: 2 this now behaves the same way as the Basic Component demo, i.e. that it clears the input.

But I am not super certain if this behaviour is correct either. Yes, if auto_uploads: true was set then I can guess that's fine, but I have it set to false. So, from UX perspective I would expect the input to display the file name until I hit Upload button and now it always shows "No file chosen" while clearly a file is chosen and hasn't been uploaded just yet. See video below:

liveupload-.6.mp4

Note: I am not displaying "Pending uploads" in my code so it kind of makes more sense there. I have one file input, where I expect user to select a file (or files), then have the usual web experience on seeing that the input shows files are selected, and then they hit Upload. I could add "Pending uploads" but that's not on our designs and would have to go through someone to approve the UI change... but generally I think it's a custom feature to use "Pending uploads" and maybe we should be doing what the plain old HTML is doing when submitting form, by default.

[APB9785]

I'm also noticing that Phoenix.LiveView.cancel_upload/3 reproduces this issue as well. The filename text will still be present, though the input is considered empty. (as mentioned earlier, this is only with max_entries: 1)

• Elixir version (elixir -v): 1.11.3 (compiled with Erlang/OTP 23)
• Phoenix version (mix deps): 1.5.8
• Phoenix LiveView version (mix deps): 0.15.5
• NodeJS version (node -v): v15.7.0
• NPM version (npm -v): 7.11.1
• Operating system: MacOS
• Browsers you attempted to reproduce this bug on (the more the merrier): Brave
• Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: Yes

[APB9785]

Another note regarding this issue - when in this state (input is empty but still shows filename), selecting the same file again fails silently (state does not change). In order to select the file again without reloading the page, the user has two workarounds:

• Select a different file, cancel that one, and then select the original one again
• Open the "Choose File" selector and click "Cancel" without selecting a file. Then the state is properly reset.

[chrismccord]

@hubertlepicki I believe this is fixed on master. Can you try it out and let me know? Thanks!