function(evt) Javascript File API

Question

I'm having a problem with the Javascript File API. First I'm checking if a form input is valued, and if the form input type=file name is image, I want it to get the image:

function checkIfValued() {
    $("form input, textarea").change(function() {
        // ifs ....
        else if (name === "image") {
            checkQrCode();
        }
        // else ifs ....
    });
}

Getting the image:

function checkQrCode(evt) {
    var qrcode = evt.target.files[0]; // create a FileList and take the first one

    if (!qrcode.type.match("image.*")) { // check to see if it is an image
        var $parentDiv = $(this).parent().parent();
        $parentDiv.removeClass("has-success"); 
        $parentDiv.addClass("has-error");
        return;
    }

    var reader = new FileReader(); // create a FileReader

    reader.onload = function (evt) {    
        var img = new Image(); // create a new image
        img.src = event.target.result; // set the src of the img to the src specified
        if ($("#qrcode").siblings().length != 0) { // if qrcode has siblings (function already executed)
            $("#qrcode").siblings().remove(); // remove the siblings
        }
        $("#qrcode").parent().append(img); // append the img to the parent
        $("#qrcode").siblings("img").addClass("img-thumbnail");
        $("#qrcode").siblings("img").css("float", "left");
    }
    reader.readAsDataURL(qrcode);
}

When I used :

$("#qrCode").change(checkQrCode);

It worked, but when I use the first code it doesn't. I guess it has something to do with the event in the checkQrCode function (in the last code, the event is tied directly to the function and in the second code it has an if statement in the way).

Anyway, how can I fix it and if someone could explain the event/evt option, it would be very appreciated.

Can you add a fiddle? In checkQRCode, event isn't defined anywhere so you're likely accessing a variable from a higher function scope. — Kerry Liu, Sep 28 '13 at 15:58
Are you sure the working code wasn't more like `$("#qrCode").change(checkQrCode)`? There's a big difference, as @KerryLiu notes, you're not passing an event to the function in either example. — numbers1311407, Sep 28 '13 at 16:37
@numbers1311407 you're right, changed it. So how can I make it work in the first code? When I put it in the first code it doesn't work... — bhc11, Sep 28 '13 at 16:43

score 1 · Accepted Answer · answered Sep 28 '13 at 16:59

1

Your checkQrCode function expects to receive the triggered event, which is given as an argument in the event callback.

When you call it like this:

$("#qrCode").change(checkQrCode);

... then that even is being passed to the function by the callback. However in your first example you're ignoring the event and calling your event-expecting function with no arguments.

You'd want it to look more like this:

$("form input, textarea").change(function(evt) {
  // ...
  checkQrCode(evt);

answered Sep 28 '13 at 16:59

numbers1311407

33,686
9
90
92

In your example I assumed you hid where the `name` variable came from behind the `// ifs` comment because it was not relevant. No, your fiddle won't work you're testing `name` but not defining it. (Although, bizarrely, it is defined in the scope as "result"). If you're trying to run the QR code callback based on the name of the input, try `$(this).attr("name")` or something. – numbers1311407 Sep 28 '13 at 18:19
Did it in my original code, forgot to add it to this... still doesn't work – bhc11 Sep 29 '13 at 04:19
Does exactly what the code says after actually adding a `name` var to compare: http://jsfiddle.net/fXKUJ/1/ – numbers1311407 Sep 29 '13 at 15:55

function(evt) Javascript File API

1 Answers1