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

Question

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]);
}

score 1 · Accepted Answer · answered Jun 12 '14 at 23:47

1

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

answered Jun 12 '14 at 23:47

Adam Merrifield

10,307
4
41
58

Thank you I applied the change you recommended it now works in Mozilla but not in Safari! I am saying if update my code ( clicking on image to upload an image not clicking on an input button) – C graphics Jun 13 '14 at 00:15
@Cgraphics Make sure that the real input field is not hidden! For example you can't make the input `display:none;` or some browsers will see it as a security risk. What you can do instead is `position:absolute;top:-999px;left:-999px;`. This should allow the triggering of a file input field with other click events. – Adam Merrifield Jun 13 '14 at 01:59
@Cgraphics How are you triggering the file input from the other click? – Adam Merrifield Jun 13 '14 at 12:27
it is inside the code ( at the question description ) allImg[i].onclick = function (e) { clickedImg = e.target || e.srcElement; fileLoader.click(e); } – C graphics Jun 13 '14 at 16:21
Although you're not using any jQuery in the question, you marked this question with jQuery so I'm going to answer with it as it's much much easier with it. Otherwise you'd have to use [this answer](http://stackoverflow.com/a/2381862/543693) to trigger the event. Can you replace `fileLoader.click(e);` with `$(fileLoader).trigger('click', e);` – Adam Merrifield Jun 13 '14 at 16:32
No luck! the updated code is there at:http://jsfiddle.net/LKUS8/6/ you also edit it – C graphics Jun 13 '14 at 16:41
Works fine for me in Chrome, Firefox, and Safari on Mac 10.9.3 – Adam Merrifield Jun 13 '14 at 18:02

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

1 Answers1