How to get Cross Browser Compatibilty for window.fileReader API of HTML5

Question

Hi Html5 developers and HTML4 developers too...

I want to know whether is there any way to support window.fileReader API of html5 in IE8 and above.

the code below :

if(window.fileReader){
  alert("supported"); // in html5 works and fires alert but not in IE8 
}

Actually, i want to read the contents of file before submitting.

• Can i use some condition, if window.fileReader is supported then
  follow 'A' line of code using HTML5 , else if window.fileReader is not supported then
  use some other thing...to read the file
• I also want to know the way to read the file contents without using
  HTML5 fileAPI... but not using ActiveXObject.

Waiting for the response..

Answer 1

There are multiple pieces that you'll need to check the support of:

//Full File API support.
if ( window.FileReader && window.File && window.FileList && window.Blob )
{
    //Supported
}

else alert( "Not supported" );

Your second requirement:

I also want to know the way to read the file contents without using HTML5 fileAPI... but not using ActiveXObject.

What you could do is this:

1. Have an iframe (you'll be posting to this)
2. Have an input of type "file"
3. When the user selects the local file, you use javascript to post it to the iframe (e.g. document.getElementById( "myForm" ).target = "myIframe"; document.getElementById( "myForm" ).submit();
4. The iframe's POSTed page (Could be PHP) reads the uploaded file contents and does a callback to the parent page (e.g. <script>window.parent.someCallbackFunction( theFileCOntents );</script>)

Answer 2

You can check features with simple if logic and wrap your functionality there.

if ('FileReader' in window) {
  // Do something with FileReader since it's supported
} else {
  // Do something with your polyfill solution
}

You can try a polyfill solutions like this one (works in IE8): https://github.com/Jahdrien/FileReader

Answer 3

You can always use a try-catch to check the FileReader() is supported in a browser.

try {
    var reader = new FileReader();
    //do something
}
catch(e) {
    alert("Error: seems File API is not supported on your browser");
    //do something
}