I’m trying to play the values of the "arquivos_b64" array in the textarea but I can’t. In the console.log the values are displayed

Question

(function() {
  var fileCatcher = document.getElementById('file-catcher');
  var fileInput = document.getElementById('file-input');
  var fileListDisplay = document.getElementById('file-list-display');
  var arquivos_b64 = [];
  var fileList = [],
    renderFileList, sendFile, compactar;

  fileInput.addEventListener('change', function(evnt) {

    fileList = [];
    for (var i = 0; i < fileInput.files.length; i++) {

      fileList.push(fileInput.files[i]);
    }

    renderFileList();

  });

  renderFileList = function() {

    arquivos_b64 = [];

    fileList.forEach(function(file) {

      var reader = new FileReader();
      reader.onloadend = function() {
        var b64 = reader.result.replace(/^data:.+;base64,/, '');

        arquivos_b64.push(b64); 
        console.log(arquivos_b64);


      };
      reader.readAsDataURL(file);
    });

    console.log(arquivos_b64);
    document.getElementById('anxUpload').value = arquivos_b64;

  };

})();

<meta name="robots" content="noindex">
<input id='file-input' type='file' multiple />
<div id='file-list-display'></div>
<textarea id="anxUpload" name="anxUpload" class="form-control"></textarea>

Answer 1

The problem is that vc is using an asynchronous function (onloadend). This code at the end:

 document.getElementById('anxUpload').value = arquivos_b64;

is executed immediately as soon as the script runs and the file b64 is still empty. Understand that the for cycle triggers the asynchronous function. And it continues running until the end. Then the main function concludes and only after that the asynchronous function will return from the execution. Then when the asynchronous function finally concludes, it only runs its code which is where the data you want to put in the textarea is. Then just pass the code where you arrow the value in the textarea into the asynchronous function. So:

(function() {
  var fileCatcher = document.getElementById('file-catcher');
  var fileInput = document.getElementById('file-input');
  var fileListDisplay = document.getElementById('file-list-display');
  var arquivos_b64 = [];
  var fileList = [],
    renderFileList, sendFile, compactar;

  fileInput.addEventListener('change', function(evnt) {

    fileList = [];
    for (var i = 0; i < fileInput.files.length; i++) {

      fileList.push(fileInput.files[i]);
    }

    renderFileList();

  });

  renderFileList = function() {

    arquivos_b64 = [];

    fileList.forEach(function(file) {

      var reader = new FileReader();
      reader.onloadend = function() {
        var b64 = reader.result.replace(/^data:.+;base64,/, '');

        arquivos_b64.push(b64); 
        document.getElementById('anxUpload').value = arquivos_b64;

      };
      reader.readAsDataURL(file);
    });

  };

})();

<meta name="robots" content="noindex">
<input id='file-input' type='file' multiple />
<div id='file-list-display'></div>
<textarea id="anxUpload" name="anxUpload" class="form-control"></textarea>