Return the Array of Bytes from FileReader()

Question

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").files;
var fileData = new Blob([input[0]]);

var reader = new FileReader();
reader.readAsArrayBuffer(fileData);
reader.onload = function(){
    var arrayBuffer = reader.result
    var bytes = new Uint8Array(arrayBuffer);
    console.log(bytes);
}

I'd like to get the return of the above function and use the array of bytes as input parameter in another function.

How about return bytes;? To use it as a parameter for another function, use it like this: myfunction(openfile(evt)); — user4570983
– user4570983, Commented Jul 15, 2015 at 14:46
I get "undefined" if changing from "console.log(bytes);" to "return bytes;" and calling outside "console.log(openfile());" — Hugo Brito
– Hugo Brito, Commented Jul 15, 2015 at 15:33

DavidDomain · Accepted Answer · 2020-04-28 08:22:55Z

20

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. 
  function openfile(evt) {
    var files = input.files;
    // Pass the file to the blob, not the input[0].
    fileData = new Blob([files[0]]);
    // Pass getBuffer to promise.
    var promise = new Promise(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.
  */
  function getBuffer(fileData) {
  	return function(resolve) {
        var reader = new FileReader();
        reader.readAsArrayBuffer(fileData);
        reader.onload = function() {
          var arrayBuffer = reader.result
          var bytes = new Uint8Array(arrayBuffer);
          resolve(bytes);
        }
    }
  }
  
    // Eventlistener for file input.
  input.addEventListener('change', openfile, false);
}(document));

<input type="file" id="files" />
<div id="output"></div>

edited Apr 28, 2020 at 8:22

answered Jul 15, 2015 at 16:04

DavidDomain

15.3k4 gold badges44 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Hugo Brito Over a year ago

Not quite what I was looking for. But I think I'll change the way I was planning to do this. Thank you.

vapcguy Over a year ago

Note that IE didn't support Promise objects until version 11.

mli Over a year ago

Look nice but does not work for me. Line var bytes = new Uint8Array(arrayBuffer); has an error TS2345: Argument of type 'string | ArrayBuffer' is not assignable to parameter of type 'ArrayBuffer | SharedArrayBuffer | ArrayLike<number>'.

DavidDomain Over a year ago

@mli Hi, may I ask, are you using TypeScript? If so, are you sure that you are correctly casting your types?

mli Over a year ago

@DavidDomain. Yea, it's typescript. So I was forced to put it like this: const bytes = new Uint8Array(reader.result as ArrayBuffer); Thanks anyway, I'm just newbie, so I thought there is no difference between javascript and typescript.

vapcguy · Accepted Answer · 2018-04-05 14:47:42Z

4

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

reader.onload = function(e){
    var arrayBuffer = e.target.result;
    var bytes = new Uint8Array(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.

edited Apr 5, 2018 at 14:47

vapcguy

1

answered Sep 2, 2017 at 2:21

Jacob Valenta

6,8098 gold badges33 silver badges42 bronze badges

2 Comments

King Wilder Over a year ago

e.target has no result property.

vapcguy Over a year ago

@KingWilder If you're using IE, you might need e.srcElement instead. It's there if you're using Chrome. But also something that was likely making it not work, the OP is basically using reader.readAsArrayBuffer(new Blob([input[0]])); when it should've been reader.readAsArrayBuffer(document.getElementById("files").files[0]);, which didn't originally get addressed, here, and will alter what e is. I added it in an edit.

Collectives™ on Stack Overflow

Return the Array of Bytes from FileReader()

2 Answers 2

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related