Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
  • Students Click Here

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here


HTML5 FileReader Shim/Polyfill -> Can't restrict file types

HTML5 FileReader Shim/Polyfill -> Can't restrict file types

HTML5 FileReader Shim/Polyfill -> Can't restrict file types


I seem to be going round in circles trying to get a FileReader shim working.

Here is the GIT project...


I'm trying to work with the FileReader shim in particular.

I have managed to get some of it working even in IE9, but seem unable to restrict file type selection?

Here is what I have...



                    <legend>Promotion Documentation </legend>
                        <label for="fp_file">Upload File</label>
                        <input type="file" class="ws-filereader" accept="application/pdf,application/msword" name="fp_file" id="fp_file" />
                <fieldset id="file_dets">
                    <legend>File Information</legend>
                        <label for="fileName">Name</label><span id="fileName"></span>
                        <label for="fileSize">Size</label><span id="fileSize"></span>
                        <label for="fileType">Type</label><span id="fileType"></span>


$('#fp_file').on('change',function() {
        fileSelected( $(this) );

// File selected
function fileSelected(ele)

  var file = $(ele).prop('files')[0];  
  var fileSize = 0;  

    if(file.size > 1024 * 1024)
        fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
        fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

The HTML5 attribute 'accept' is only working in HTML5 browsers? so the shim/polyfill seems to be incomplete.

I am using the following initialisation


// initialise HTML5 forms polyfill
webshims.setOptions('filereader',{extensions : '*.pdf;*.doc;*.docx'}); 

webshims.polyfill('forms forms-ext filereader'); 

But it doesn't make any difference and I cannot find anywhere documentation on the plugin usage.

Can anyone here assist with getting this to work?


"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close