How do I read value of variable defined in FileReader.onloadend inside XMLHttpRequest.onreadystatechange callback functin?

Question

In the code below, I need read the value of variable ext (defined inside the function reader.onloadend) in the function xhr.onreadystatechange. Right now is returning undefined. Any ideas how to fix that?

function file_upload(file_input) {
  var name = file_input.dataset.target;
  var url = file_input.dataset.url;
  var path = file_input.dataset.path;
  var ext;

  for(var i = 0; i<file_input.files.length; i++) {
    var file = file_input.files[i];
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var id = xhr.responseText;
            var input = document.createElement("input");
            input.setAttribute("type", "hidden");
            input.setAttribute("name", name);
            input.setAttribute("value", id);
            document.getElementById("btn_uload_"+name+"_"+ext).append(input);
            document.getElementById("empty_file").style.display = 'none';
            document.getElementById("single_file_"+ext).style.display = 'block';
        }
    };
    var reader  = new FileReader();
    reader.onloadend = function() {
      var bytes = reader.result;
      var ext = file.name.split(".").pop();
      var formData = new FormData();
      formData.append('bytes', bytes);
      formData.append('type', ext);
      xhr.send(formData);
    }
    reader.readAsDataURL(file);
  }
}

Just create `ext` at the top of the loop, it isnt dependent on anything in the filrereader event and use `let` instead of `var` so it becomes block scoped to the loop — Patrick Evans, Nov 21 '19 at 12:24
I already do that, `ext` is created on the top of the function (fourth line on the code above). — Kleber Mota, Nov 21 '19 at 12:30
no you need to do `let ext = ...` at the top of your loop. defining it at the top of your function is not the same thing — Patrick Evans, Nov 21 '19 at 12:35
Ok, I try that (I use `let ext=''` instead `var ext` on the top of the function), but still got undefined when it's used in the line `document.getElementById("btn_uload_"+name+"_"+ext).append(input)` — Kleber Mota, Nov 21 '19 at 12:43
I think somehow the block inside `xhr.onreadystatechange` is being called before the one inside `reader.onloadend`? I could be wrong. Is it could be some synchronization issue? — Kleber Mota, Nov 21 '19 at 12:44

score 1 · Accepted Answer · answered Nov 21 '19 at 13:00

Remove the var ext =... from the reader callback that is only making a local variable for that function (it isnt setting the external one. Even if you remove the var keyword so that it starts setting the external ext variable you will end up hitting an issue discussed at this q&a

Move your assignment to the top of the loop(not the top of the function). And use let instead of var that way it is block scoped and wont run into the previously mentioned issue

for(var i = 0; i<file_input.files.length; i++) {
    var file = file_input.files[i];
    let ext = file.name.split('.').pop();

How do I read value of variable defined in FileReader.onloadend inside XMLHttpRequest.onreadystatechange callback functin?

1 Answers1