HTML5 file upload feature detections in browser

Question

I am trying to upload the files using the HTML5 features. As per the investigation i have found that there are 3 different ways of uploading the files,

1. By encoding file as multipart: This is done when there is support for file reader only.
2. Send binary data using XMLHTTP2(AJAX) spec method: New method send(Blob/File) is able to send the binary data across the wire.
3. FormData object: Using XMLHTTP(AJAX) send(FormData) method.

Now for cross browser issues and feature detections snippet like below is simple,

if(typeof FileReader == "undefined")

However i am not sure how to find out if send() method of the AJAX in current browser is supporting send(FormData) or send(Blob/File) method implementation. How to find it ? Is there is Object.property trick here ? Or something different ?

Thanks,

Answer 1

To handle binary data you will want to use WebSockets. This is part of the new HTML5 spec. There is a problem, though. As of mid-December, 2010, WebSockets were disabled in every major browser because of a cache-poisoning vulnerability.

Last I heard this was still being sorted out.

To upload the file before sending it via WebSockets you should use the FileReader API which is supported in the latest version of each browser (to the best of my knowledge).

To check if the FileReader is supported you should test like:

if (FileReader){
  // It's supported
}

You can also check for:

if (window.URL){
  //
}

for an alternative.