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 fire in IE9. This is my markup:
<body> <div class="main"> <canvas id="mainCanvas" width="600" height="600"></canvas><br /> <div id="fileReaderSWFObject"></div> <input type="file" id="imageLoader" name="imageLoader" /><br /> <input id="text" type="text" placeholder="some text..."> </div> <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> <!--[if lt IE 10]> <script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> <script src="js/vendor/jquery-ui-1.8.23.custom.min.js"></script> <script src="js/vendor/jquery.FileReader.min.js"></script> <![endif]--> <script src="js/plugins.js"></script> <script src="js/main.js"></script> </body> And this is main.js:
$(function () { // Variables var canvas = document.getElementById('mainCanvas'); var context = canvas.getContext('2d'); var canvasCenter = canvas.width / 2; var img = ''; var newImageHeight = 0; var logoX = 0; 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); }; // Init if ($.browser.msie && $.browser.version <= 9) { swfobject.embedSWF('filereader.swf', 'fileReaderSWFObject', '100%', '100%', '10', 'expressinstall.swf'); $('#imageLoader').fileReader({ id: 'fileReaderSWFObject', filereader: 'filereader.swf', expressInstall: 'expressInstall.swf', debugMode: true, callback: function () { console.log('filereader ready'); } }); } $('#imageLoader').change(function (e) { if ($.browser.msie && $.browser.version <= 9) { console.log(e.target.files[0].name); } else { 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(); }); }); A lot of code but i thought a context might help. The important lines are just below the Init comment. The callback-function in the .fileReader init options never fires. It does fire in other modern browsers though (if you remove the if statement).