Return The Array Of Bytes From Filereader()

I need some help returning the 'bytes' variable from this function below to be used as input in another function. function openfile() { var input = document.getElementById('files')

Solution 1:

You can use promises to wait for the file reader to finish loading your file.

The Promise object is used for deferred and asynchronous computations. A Promise represents an operation that hasn't completed yet, but is expected to in the future.

Here you can find more information on promises.

Here is an example on how you could integrate a promise into your situation.

(function (document) {
  var input = document.getElementById("files"),
      output = document.getElementById('output');

  // Eventhandler for file input. functionopenfile(evt) {
    var files = input.files;
    // Pass the file to the blob, not the input[0].
    fileData = newBlob([files[0]]);
    // Pass getBuffer to promise.var promise = newPromise(getBuffer(fileData));
    // Wait for promise to be resolved, or log error.
    promise.then(function(data) {
      // Here you can pass the bytes to another function.
      output.innerHTML = data.toString();
      console.log(data);
    }).catch(function(err) {
      console.log('Error: ',err);
    });
  }

  /* 
    Create a function which will be passed to the promise
    and resolve it when FileReader has finished loading the file.
  */functiongetBuffer(fileData) {
  	returnfunction(resolve) {
        var reader = newFileReader();
        reader.readAsArrayBuffer(fileData);
        reader.onload = function() {
          var arrayBuffer = reader.resultvar bytes = newUint8Array(arrayBuffer);
          resolve(bytes);
        }
    }
  }
  
    // Eventlistener for file input.
  input.addEventListener('change', openfile, false);
}(document));

<inputtype="file"id="files" /><divid="output"></div>

Solution 2:

If you pass the onload function the event, you can make it work.

reader.onload = function(e){
    var arrayBuffer = e.target.result;
    var bytes = newUint8Array(arrayBuffer);
    console.log(bytes);
}

This corrects it from reader.result to e.target.result;.

Additionally, there's a problem in using fileData, which is set to Blob[files[0]] and sending that to reader.readAsArrayBuffer. Remove fileData and call it with reader.readAsArrayBuffer(input[0]);, instead.