CODEWITHSUNDEEP
javascripthtmlgoogle-chrome
123
123

Reputation: 5824

Javascript TypeError event exception on Chrome

I'm trying to add a FileReader onload event for Chrome, it works fine on Firefox but throws a TypeError exception when I try on Chrome.

Here's my code:

function random(min, max)
{
    return Math.floor(Math.random() * (max - min + 1) + min);
}

function handleDrop(event) {
    var dt = event.dataTransfer,
        files = dt.files,
        count = files.length;

    event.stopPropagation();
    event.preventDefault();

    for (var i = 0; i < count; i++)
    {
        var fileReader = new FileReader();

        fileReader.addEventListener("loadend", function(e) {
            xn = random(0, $('canvas').attr('width'));
            yn = random(0, $('canvas').attr('height'));
            widthn = random(100, 200);

            $("canvas").drawImage({
                source: e.target.result,
                fromCenter: false,
                x: xn,
                y: yn,
                width: widthn
            });

            delete e.target.result;
        } , false);

        fileReader.readAsDataURL(files[i]);
    }
}

$(document).ready(function()
{
    var dropContainer = document.getElementById("content");

    dropContainer.addEventListener("dragenter", function(event){event.stopPropagation();event.preventDefault();}, false);
    dropContainer.addEventListener("dragover", function(event){event.stopPropagation();event.preventDefault();}, false);
    dropContainer.addEventListener("drop", handleDrop, false);

});

I'm using the Chrome script debugger and the exception is throwing at the following line:

fileReader.addEventListener("loadend", function(e) {

What can I do to fix this in Chrome?

Upvotes: 0

Views: 509

Answers (2)

Esailija
Esailija

Reputation: 140220

Well obviously, FileReader doesn't have addEventListener. (TypeError: Object #<FileReader> has no method 'addEventListener')

Use:

var fileReader = new FileReader();

fileReader.onloadend = function (e) {
    xn = random(0, $('canvas').attr('width'));
    yn = random(0, $('canvas').attr('height'));
    widthn = random(100, 200);

    $("canvas").drawImage({
        source: e.target.result,
        fromCenter: false,
        x: xn,
        y: yn,
        width: widthn
    });
};

Upvotes: 4

Pointy
Pointy

Reputation: 413720

You should probably make sure you're explicitly converting the CSS properties to numbers before sending them to that "random()" function.

        // ...
        xn = random(0, ~~$('canvas').attr('width'));
        yn = random(0, ~~$('canvas').attr('height'));

You could use parseInt() of course; that's just an example; so alternatively:

        // ...
        xn = random(0, parseInt($('canvas').attr('width'), 10));
        yn = random(0, parseInt($('canvas').attr('height'), 10));

Also of course the variables should be declared with var:

        // ...
        var xn = random(0, ~~$('canvas').attr('width'));
        var yn = random(0, ~~$('canvas').attr('height'));

Upvotes: 1

Related Questions