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

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

Answers:

Answer

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

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

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
}

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.