Not working on IE9

[klu00]

Hi,

Thx for this, this is a cool feature, but unfortunately, it does not work on IE9 because of FileReader API... Is there a way to make it work on IE9 ?

Thx !

[adonespitogo]

I think this one would work. We'll just have to implement it. If you can make a pull request for this, that will be great. Else, let's wait till I can implement this.

[klu00]

Thx for your answer, I will try if I have some time for this, but for now... nope !

[klu00]

I tried something, but finally I have realized that readAsArrayBuffer() method isn't implemented in FileReader.js ... And we need it here ! [https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#file-api](There are) some Pollyfills and I tried dropbox too, but the method is again not implemented :(

[robianmcd]

Anyone have any luck finding a workaround for this?

[robianmcd]

@adonespitogo Why does this library use readAsArrayBuffer()? Couldn't it use readAsDataURL() instead and just strip off the starting bit of the string ("data:application...;base64,")? And then it wouldn't need to manually convert the data to base 64. readAsDataURL() is also supported by the polyfill so this could solve the IE9 issue but I'm not sure if I'm missing something.

[adonespitogo]

@robianmcd There's really no significance in using readAsArrayBuffer() as I can remember. If we could implement readAsDataURL() then we can possibly solve this issue. But I don't have much time for now.

[robianmcd]

Thanks for the info. Just wanted to make sure I wasn't going about this all wrong. I'll give it a shot

[adonespitogo]

Sure thanks. Please let us know when you find a solution.

[robianmcd]

Ok I think I got this working. Unfortunately I'm using a pretty old version of angular-base64-uploads so there would still be a bit of work to make a PR. Here's what I had to change

index.html

...
<script src="lib/swfobject.js"></script>
<script src="lib/jquery.FileReader.js"></script>
...

angular-base64-upload.js

/*! angular-base64-upload - v0.0.8 - 2015-04-27
 * https://github.com/adonespitogo/angular-base64-upload
 * Copyright (c) Adones Pitogo <[email protected]> 2015; Licensed  */
angular.module('naif.base64', [])
    .directive('baseSixtyFourInput', ['$window', '$parse', function ($window, $parse) {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function (scope, elem, attrs, ngModel) {
                var fileObject = {};

                scope.readerOnload = function(e){
                    var dataUrl = e.target.result;
                    //The base64 data comes after this
                    var dataUrlDelimiter = 'base64,';
                    fileObject.base64 = dataUrl.substring(dataUrl.indexOf(dataUrlDelimiter) + dataUrlDelimiter.length);
                    scope.$apply(function(){
                        ngModel.$setViewValue(angular.copy(fileObject));
                        var onUpload = $parse(attrs.onUpload);
                        onUpload(scope, {$file: fileObject});
                    });
                };

                var reader = new FileReader();
                reader.onload = scope.readerOnload;

                $(elem).fileReader({filereader: 'lib/filereader.swf', expressInstall: 'lib/expressInstall.swf'});
                elem.on('change', function(event) {
                    if(!event.target.files.length) {
                        return;
                    }

                    var file = event.target.files[0];
                    fileObject.filetype = file.type;
                    fileObject.filename = file.name;
                    fileObject.filesize = file.size;
                    reader.readAsDataURL(file);
                });
            }
        };
    }]);

I also had to server up filereader.swf and expressInstall.swf at the location specified when I call $(elem).fileReader.