Reset live_file_input after file has been uploaded

hubertlepicki · April 22, 2021, 6:14pm

The issue is opened here:

github.com/phoenixframework/phoenix_live_view

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

opened 06:08PM - 22 Apr 21 UTC

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: https://user-images.githubusercontent.com/33274/115764962-75bab100-a3a6-11eb-90fe-55e69dc4ad3e.mp4 ElixirForum thread for more info: https://elixirforum.com/t/reset-live-file-input-after-file-has-been-uploaded/39154

cenotaph · April 22, 2021, 6:55pm

I think this line is not being called upon successful upload - I couldn’t find any reference for usage, could be dynamic, didn’t debug throughly.

Or browser implementation changed, the suggestion is to set the value to empty, but HTML input won’t take even test values.

github.com

phoenixframework/phoenix_live_view/blob/6936ba8d0c1d14646fd14a391b1d0e6697e0f4a7/assets/js/phoenix_live_view.js#L287


      
              fileData[uploadRef] = fileData[uploadRef] || []
              entry.ref = this.genFileRef(file)
              entry.name = file.name
              entry.type = file.type
              entry.size = file.size
              fileData[uploadRef].push(entry)
            })
            return fileData
          }
          
          static clearFiles(inputEl){
            inputEl.value = null
            DOM.putPrivate(inputEl, "files", [])
          }
          
          static untrackFile(inputEl, file){
            DOM.putPrivate(inputEl, "files", DOM.private(inputEl, "files").filter(f => !Object.is(f, file)))
          }
          
          static trackFiles(inputEl, files){
            if(inputEl.getAttribute("multiple") !== null){

While its display value still chicken.png

I just remembered there is nice cancel upload functionality and wanted to see what’s behind the scenes but then I figured out, the image preview never changes with that demo.

I followed through the chain and didn’t spot clearFiles. Not sure who would call to clear.

mcrumm · April 22, 2021, 7:50pm

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!

AstonJ · April 22, 2021, 11:31pm

We generally try to keep uploads as small as possible as many of our members browse the forum on their commute (large images can eat into their bandwidth). Generally I would recommend small image uploads (but not of text if it can simply by copied and pasted into a post) and for anything larger than the forum limits, uploaded to somewhere like a GH gist and then simply post the link to it on the forum