I'm using HTML5 input type="file" with multiple attribute. when the user chooses multiple files it can take up to 10 seconds until change event is raised, and in this time the screen freezes. I want to show loading animation while all files are uploaded to browser.
<input type="file" multiple name="files" />
I thought of a solution myself but it's not complete. I registered to the input's onClick event and when the user clicked the button to add files, I showed the loader, and when the onChnage event was fired I hid it. The problem is that if the user clicked cancel and didn't choose any file, the change event wasn't fired and the loader didn't disappear.
var input = document.querySelector("input[type=file]");
input.addEventListener("change", function(event) {
// do stuff with files...
hideLoader();
})
input.addEventListener("click", function(event) {
showLoader()
})
I tried to detect when the user click cancel and all the solutions didn't work for me (here and here). I also thought about adding a dummy file to the files object when the user click the button so it would fire the change event when nothing is selected (because it should change the list to an empty list), but I found out it's impossible to set the FileList object (if it's not with an existing file or null) or push a dummy file to it.
I'm actually using angularJs and will use this code inside a directive, but I wanted to simplify things here...
Any ideas?
