code is working while debug, but without not - Javascript / Jquery

Question

I have an issue that I don't understand and I have no idea how to fix it, where to look for the cause. When I'm debugin (chrome) every thing is working, but during normal use it dosen't. For me is some kind of Science-Fiction, it would be better for me if it's more Science than Fiction :)

for (var i = 0; i < filteredAddedFiles.length; i++) {
  if ((/\.(png|jpeg|jpg|gif)$/i).test(filteredAddedFiles[i].name)) {

    (function (file) {
      var reader = new FileReader();
      var blob = b64toBlob(file.base64.replace('data:image/jpeg;base64,', ''), file.type);
      reader.addEventListener("load", function () {

        console.log(this);
        var image = new Image();
        image.src = window.URL.createObjectURL(blob);
        image.onload = function () {
          preview.innerHTML += drawHtml(image, file)
        };

        //I tried:
        //(function (b) {
        //  var image = new Image();
        //  image.addEventListener("load", function () {
        //    preview.innerHTML += drawHtml(this, file);
        //    //window.URL.revokeObjectURL(image.src);
        //  });
        //  image.src = window.URL.createObjectURL(b);
        //})(blob);
      });
      reader.readAsDataURL(blob); 
    })(filteredAddedFiles[i]);

  } else {
    errors += filteredAddedFiles[i].name + " Unsupported Image extension\n";
  }
}

here I attached a short movie that shows how its working link to movie

not working - I mean - it looks like the all thing inside for dosen't executed

EDIT: 1

@Teemu - I turn on logs in chrome console and all console.log's appear

@Katie.Sun - now the above for - console.log(filteredAddedFiles.length); is 0 - but when I'm debuging code the same console.log(filteredAddedFiles.length); have values !

EDIT: 2

@Matti Price filteredAddedFiles - is the result of custom logic of page, filtering, validation etc. Everything starts here:

addedFiles = added(files); // files - FileList from input this is a read only array of obj

function added(from) {
            var out = [];
            for (var i = 0; i < from.length; i++) {
                (function (obj) {
                    var readerBase64 = new FileReader();
                    readerBase64.addEventListener("load", function () {
                        var fileBase64 = readerBase64.result;
                        var row = { name: obj.name, size: obj.size, type: obj.type, base64: fileBase64 }
                        out.push(row);
                    });
                    readerBase64.readAsDataURL(obj); 
                })(from[i]);
            }
            return out;
        }

then addedFiles - do something farther and transform into filteredAddedFiles later. what I found in added function? during debug there is an length value witch is correct, but when I opened the __proto__: Array(0) I found length property = 0.

Should this length value be equal to the value from above length?

The second thing: I have to admit that I don't have enough knowledge aboute addEventListener. Are there any queues here or some thread etc?

EDIT: 3 After last @Teemu comment I made some changes (I had to read a lot aboute promisses etc:)), but output is the same console.log("out resolve", out); shows a array of object, but console.log("out.length then", out.length); shows 0 and the small blue i-icon show msg - Value below evaluated just now

var out = [];
for (var i = 0; i < files.length; i++) {
    fillArray(files[i], out);
}
console.log("out resolve", out);
console.log("out.length then", out.length);

function fillArray(obj, out) {
    return new Promise(function (resolve, reject) {
        var readerBase64 = new FileReader();
        readerBase64.addEventListener("load", function () {
            var fileBase64 = readerBase64.result;
            var row = { name: obj.name, size: obj.size, type: obj.type, out.push(row);
            resolve(out);
        });
        readerBase64.readAsDataURL(obj); 
    });
}

After I posted the edit above I relized that I just create promise, I forgot to call `promise

, but this is not important, because 90% of my code has been changed because of this topic and the answer of the Golden Person @Kaiido

URL.createObjectURL() - is synchronous. You don't need your Promise wrapping event handlers hell, all can be done in a single loop.

In my case, this is a better solution than a filereader, I have to upload only images, and with some restrictions thanks to which I don't have to worry about freeze the Internet browser, because of the synchronous nature of createObjectURL() Thank you for your help and commitment