How to detect if the new HTML5 File Upload progress information is available in your browser

HTML5 has a some new File Upload features added to it must notably upload progress notifications while the file is being posted to the server through the XMLHttpRequest Level 2 (XHR2) object (http://www.w3.org/TR/XMLHttpRequest2/#event-xhr-progress).

Keep in mind that XMLHttpRequest Level 2 is not really HTML5 but as mentioned in this article http://www.html5rocks.com/en/tutorials/file/xhr2/, it is part of the core platform improvements and therefore frequently gets included under the HTML5 name umbrella:

One of the unsung heroes in the HTML5 universe is XMLHttpRequest. Strictly speaking XHR2 isn't HTML5. However, it's part of the incremental improvements browser vendors are making to the core platform.

Chrome, Firefox, Safari, and IE10 all support the new XHR2 progress events but unfortunately IE9 does not so you will need to check for them and fall back to something like SWFUpload to give you progress information while your file is posting to the server if the XHR2 object is not available.

But how do you test to see if the browser supports the new features of XMLHttpRequest Level 2 (XHR2) for progress information?

There is an interesting Modernizr thread here which talks about the various ways to test for it.  In the end all you need to test for is the existence of window.FormData.

If you want to add an XHR2 test into Modernizr you can do it like this:

        Modernizr.addTest('xhr2', 'FormData' in window);
        if (Modernizr.xhr2) {
             alert('File upload progress supported');
        } else {
             alert('No file upload progress support');
        }
Or you can just do it by running your own check without Modernizr:
        if (!!window.ProgressEvent && !!window.FormData) {
             alert('File upload progress supported');
        } else {
             alert('No file upload progress support');
        }

Note: Technically the test for window.ProgressEvent being undefined is not necessary as shown in the above Modernizr thread but I left it in just for my own knowledge.

No Comments