CODEWITHSUNDEEP
javascriptjqueryhtmlmozilla
C graphics
C graphics

Reputation: 7458

JavaScript: Why FileReader.onload does not get called in mozilla?

I am trying to upload an image using JavaScript. It works fine in Internet explorer and chrome but not in Mozilla!I also placed it at: http://jsfiddle.net/LKUS8/6/

Why reader.onload does not get called in Mozilla?

<html>
<head>
</head>
<body>
    <input type="file" accept="image/*" capture="camera" id="fileLoader" name="fileLoader" style="display: none" />
    <canvas id="bufferCanvas" style="display:none"></canvas>
    <img id="img1" class="imgs" style="display:block">
    <textarea id="textarea1" name="Pic1" rows="4" cols="50" style="display:none"></textarea>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="uploadImg.js"></script>
</body>
</html>

uploadImg.js:

fileLoader = document.getElementById('fileLoader');
var bufferCanvas = document.getElementById('bufferCanvas');
var clickedImg = '';
var allImg = document.getElementsByClassName("imgs");
for (var i = 0; i < allImg.length; ++i) {
    allImg[i].style.cursor = "pointer";
    allImg[i].src = "https://cdn2.iconfinder.com/data/icons/picol-vector/32/image_add-128.png";
    allImg[i].onclick = function (e) {
        clickedImg = e.target || e.srcElement;//for ie 8 and before use e.srcElement
        fileLoader.click(e);
    }
}

fileLoader.addEventListener('change', handleFile, false);

textarea1 = document.getElementById('textarea1');
var ctx = bufferCanvas.getContext('2d');

function handleFile(e) {
    var reader = new FileReader();
    reader.onload = function (event) {
    alert("reader.onload called"); //<-----
        var img = new Image();
        img.onload = function () {
            clickedImg.src = img.src;
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(event.target.files[0]);
}

Upvotes: 2

Views: 7522

Answers (1)

Adam Merrifield
Adam Merrifield

Reputation: 10407

On the last line of the handleFile function you need to change:

reader.readAsDataURL(event.target.files[0]);

to

reader.readAsDataURL(e.target.files[0]);

You're using the wrong variable for the event as defined here function handleFile(e) {

Demo

Upvotes: 1

Related Questions