How can I check if the browser support HTML5 file upload (FormData object)?

Question

How can I check if the browser support HTML5 file upload (FormData object)?

var fd = new FormData();

Following the answer from this post, but the code does not return correct answer about the browser,

window.onload = function()
{
 if (!!window.FileReader)
 {
  alert('supported');
 }
 else
 {
  alert('not supported');
 }
}


Firefox - supported
Chrome - supported
Opera - supported
Safari - not supported
IE9 - not supported

But the correct browser support should be,

Firefox - supported
Chrome - supported
Opera - not supported
Safari - supported
IE9 - not supported

I have tested the html 5 file upload on Opera and it is not working for sure.

I am sure that safari supports html 5 file upload.

Solution 1

Try if( window.FormData === undefined ) or if( window.FormData !== undefined ).

Solution 2

From http://blog.new-bamboo.co.uk/2010/7/30/html5-powered-ajax-file-uploads

function supportAjaxUploadProgressEvents() {
    var xhr = new XMLHttpRequest();
    return !! (xhr && ('upload' in xhr) && ('onprogress' in xhr.upload));
};

As FormData, the ability to send() one, and the upload property (and its onprogress event) are all part of XMLHttpRequest level 2, you can test for .upload to see if you've got a level 2. I don't have a Mac handy, but the function (sadly, but correctly) returns false for Opera 11.50 (and true for Firefox 4).

Solution 3

  function supportFormData() {
     return !! window.FormData;
  }

Source: https://www.new-bamboo.co.uk/blog/2012/01/10/ridiculously-simple-ajax-uploads-with-formdata/

Solution 4

This is the one-liner I use to check if the browser supports FormData and upload progress, in jQuery:

 var xhr2 = !! ( window.FormData && ("upload" in ($.ajaxSettings.xhr()) );

Solution 5

You could may be use the workaround provided by this library. https://github.com/francois2metz/html5-formdata

View more solutions