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

[1DMF]

Hi,

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

Here is the GIT project...

https://github.com/aFarkas/webshim/

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

HTML

                <fieldset>
                    <legend>Promotion Documentation&nbsp;</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> 
                <fieldset id="file_dets">
                    <legend>File Information</legend>
                    <div>
                        <label for="fileName">Name</label><span id="fileName"></span>
                    </div>
                    <div>
                        <label for="fileSize">Size</label><span id="fileSize"></span>
                    </div>
                    <div>
                        <label for="fileType">Type</label><span id="fileType"></span>
                    </div>
                </fieldset>

JS/JQuery

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

// File selected
function fileSelected(ele)
{    

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

  if(file)
  {
    if(file.size > 1024 * 1024)
    {
        fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
    }
    else
    {
        fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
    }
    
    $('#fileName').html(file.name);
    $('#fileSize').html(fileSize);
    $('#fileType').html(file.type);
    $('#file_dets').show('slide');
    
  }

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?

Thanks,
1DMF.

"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