File upload

22 Feb 2012

The alternatives right now (2012-02-22):


  • Standard html: File select together in a form that is submitted to a page. (firefox, chrome, IE)
  • Iframe hack: File select together with hidden iframe used to upload file. (firefox, chrome, IE)
  • Flash (all flash enabled browsers)
  • FileReader  (firefox, chrome)
    1. Drag and drop together with FileReader and ajax post. 
    2. File select together with FileReader and ajax post.


    When building ordinary web applications then the first alternative is definitely the best. It's simple and works well. If you are building a more javascript intense application you are in a different mess. If you are supporting IE 7-9 then alternative 2 and 3 is what you are looking for. To enable the best experience you could sniff if the browser handles FileReader (since IE10 might support it) and enable a better experience in that case.

    Note: I've only considered firefox, chrome and IE. 



    Comments or errors? Fork this post and do a pull request on github