FileReader.js nothing happens in IE9

Question

I need help setting up Jadriens FileReader.js. I have set up everything as I think this polyfill works. But the callback that fires when everything is initiated doesn\'t fir

Answer 1

The problem with IE9 is you need flash player to be installed first also there are many features not supported by IE9

Answer 2

There are a combination of mistakes here.

• Jahdriens filereader takes care of the embedding of flash. Just include the swfObject library.
• Browser sniffing = bad idea. Modernizr = good idea.
• Make sure you have flash for IE installed :(

My final code looks like this and it works perfect. HTML:

<canvas id="mainCanvas" width="600" height="600"></canvas><br />
<a id="imageLoaderButton" class="button upload">load image</a>
<input type="file" id="imageLoader" class="hidden" name="imageLoader" />
<input id="text" type="text" placeholder="some text...">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.1.min.js"><\/script>')</script>
<script src="js/main.js"></script>

+ link in a custom build of modernizr in the head. (click "non core detects" -> "file-api" when creating you custom build)

And my JS:

$(function () {
    Modernizr.load({
        test: Modernizr.filereader,
        nope: ['js/vendor/swfobject.js', 'js/vendor/jquery-ui-1.8.23.custom.min.js', 'js/vendor/jquery.FileReader.min.js'],
        complete: function () {

            if (!Modernizr.filereader) {
                $('#imageLoaderButton').fileReader({
                    id: 'fileReaderSWFObject',
                    filereader: 'filereader.swf',
                    expressInstall: 'expressInstall.swf',
                    debugMode: true,
                    callback: function () { 
                        $('#imageLoaderButton').show().on('change', read);
                    }
                });
            } else {
                $('#imageLoaderButton').show().on('click', function () {
                    $('#imageLoader').trigger('click').on('change', read);
                });
            }

        }
    });
    // Variables
    var canvas = document.getElementById('mainCanvas');
    var context = canvas.getContext('2d');
    var canvasCenter = canvas.width / 2;
    var img = '';
    var padding = 50;

    // Functions
    var flushCanvas = function () {
        context.fillStyle = '#000';
        context.fillRect(0, 0, canvas.width, canvas.width + padding);
        if (img !== '') {
            context.drawImage(img, padding, padding, canvas.width - (padding * 2), newImageHeight - (padding * 2));
        }
        setText();
    };
    var setText = function () {
        context.textAlign = 'center';
        context.fillStyle = '#fff';
        context.font = '22px sans-serif';
        context.textBaseline = 'bottom';
        context.fillText($('#text').val(), canvasCenter, canvas.height - 40);
    };
    var read = function (e) {
        if (typeof FileReader !== 'undefined') {
            var reader = new FileReader();
            reader.onload = function (event) {
                img = new Image();
                img.onload = function () {
                    newImageHeight = (img.height / img.width) * (canvas.width);
                    canvas.height = newImageHeight + padding;
                    flushCanvas();
                }
                img.src = event.target.result;
            }
            reader.readAsDataURL(e.target.files[0]);

        }
    };

    $('#text').keyup(function (e) {
        flushCanvas();
    });
});