title: Loop over uploaded files and return an array of file signatures
body: <p>I want to loop over files selected for upload, get the file signature and return a array of file signatures. The <code>listOfFileSignatures</code> array is empty outside the <code>readFirstFourBytes</code> function. Is their a way to make it accessible globally?</p>
  <pre><code>var listOfFileSignatures = [];
  var totalSize;
  var uploadedFiles = document.getElementById(&quot;notes&quot;).files;
  for (file of uploadedFiles) {
      var blob = file;
      var fileReader = new FileReader();
      fileReader.onloadend = function readFirstFourBytes(e) {
          var arr = (new Uint8Array(e.target.result)).subarray(0, 4);
          var fileSignature = &quot;&quot;;
          for (var i = 0; i &lt; arr.length; i++) {
              fileSignature += arr[i].toString(16);
          };
          listOfFileSignatures.push(fileSignature);
          console.log(listOfFileSignatures); // Array(3) [ &quot;ffd8ffdb&quot;, &quot;ffd8ffe0&quot;, &quot;47494638&quot; ]
      };
      fileReader.readAsArrayBuffer(blob);
  };
  console.log(listOfFileSignatures); // Array [] 
  </code></pre>
  <p><a href="https://i.stack.imgur.com/D3Gvp.png" rel="nofollow noreferrer">Heres the output</a></p>