HTML5 input type file Error handling

Question

I build a module to upload files using HTML5 input type file element. I found I issue which I need to address/ resolve by showing proper error message:-

1) User selects a file to upload but before pressing uploading button user deleted the source file. now user clicks upload button. In my case nothing happens on UI.

I want to ask that by any means we can know weather file still exists before clicking upload button on input type file element of HTML5.

Pls Note: I am using ember.js

Answer 1

I don't know how you are uploading the file (Form, XMLHttpRequest, 3rdParty lib), but you could attach an error event to the Element, the form, the XHR element, or event the window element itself.

If you attached an error handler to the element, you can not handle your use case as the error will be thrown at the very moment when read the file (XHR, FORM send, etc), not when the user picks up the file.

Another option is to prevent this error making the browser read the file "on the fly" by using:

window.URL.createObjectURL(files[i]);  

Example

Obviously, if the file is too big you should use a webworker or check the file size before loading it, so you don't freeze the UI.