Question

I have the following piece of code. The string is being sent to uploadFile correctly but the line alert(str) is giving me undefined?

function uploadFile(str){
    alert(str); //prints correctly
    var fileTag = document.getElementById('fileinput');
    var file = fileTag.files[0];
    var xmlhttp=new XMLHttpRequest();
    var formData = new FormData();
    formData.append("thefile", file); 
    xmlhttp.addEventListener("load", function(evt,str){
         alert(str); //undefined
    }, false);
    ....
}

I’m fairly new to javascript, so can anyone tell me why this is happening? thank you

Answer 1

The event handler function receives a single parameter: an event object.

Your event handler

function(evt,str) { }

expects two parameters. Naturally, as it doesn’t receive the second one, str, you get that str is undefined.

If you want your event handler to use the str variable which is defined as a parameter of function uploadFile(str){ }, however, you can do that, because the evet handler function is defined inside the uploadFile(str){ } function. This is called a closure. Just change

function(evt, str){ }

to

function(evt) { }

This way, you remove the inner definition of str, which hided the outer one, in uploadFile(str). So in

xmlhttp.addEventListener("load", function(evt,str){
     alert(str);
}, false);

you will really get the alert of the string str.