31

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.

Community
  • 1
  • 1
Run
  • 54,938
  • 169
  • 450
  • 748

7 Answers7

70

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

webinista
  • 3,750
  • 1
  • 20
  • 21
  • 12
    +1, in IE8/IE9 `( window.FormData === undefined )` returns true and in IE10, it returns false. – Annie Dec 06 '12 at 10:28
  • 2
    Should probably use `typeof`, since `undefined` is not a keyword in some browsers. (e.g. I can say `var undefined = window.FormData`) – Azmisov Apr 21 '16 at 00:56
  • So, with typeof, "if( typeof( window.FormData ) == 'undefined' )", right? – DCShannon May 24 '16 at 01:21
  • 3
    @DCShannon no need for the parens: `if(typeof window.FormData === 'undefined')` – Koen. Oct 13 '16 at 16:16
  • 1
    @Koen Just because they're optional doesn't mean they're forbidden. I prefer to use the parentheses. – DCShannon Oct 13 '16 at 16:52
  • 2
    I didn't say that they're forbidden. But do you write `+`, `-` and other "unary operators" with parentheses too? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference#Unary_operators – Koen. Oct 13 '16 at 16:56
11

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).

Leon
  • 111
  • 2
7
  function supportFormData() {
     return !! window.FormData;
  }

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

Faraz Kelhini
  • 3,925
  • 32
  • 38
3

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()) );
Wavy Davy
  • 102
  • 5
1

On Safari 5.1.7 , Firefox <6, Opera < 12.14 form data is suported but it is buggy.

  • Safari will return file size 0

    Opera does not support append method of form data

    firefox <6 does not work correctly

albanx
  • 6,193
  • 9
  • 67
  • 97
1

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

Sujay
  • 2,198
  • 23
  • 32
-3

You need to check if the browser supports the HTML5 file API. I do that by checking if the FileReader function is set, if it’s not set it means that the browser won’t support the file API. 

// Check if window.fileReader exists to make sure the browser supports file uploads
if (typeof(window.FileReader) == 'undefined') 
    {
        alert'Browser does not support HTML5 file uploads!');
    }
programmer guy
  • 123
  • 3
  • 9