4

I am reading an array via JavaScript and saving the size of that array in a reader.onload event. I think that the reader.onload function is called when the file has finished uploading. event.target.result stores that array. I would like that array saved as a variable to be used in other functions but, I tried initializing an empty array and using the 

slice

function but, it didn't work. The console returns an undefined value.

Here is the code 

<!DOCTYPE html>
<html>
<head>
    <title> Home Page </title>
</head>

<body>
    <input type="file" id="file" name="files[]" multiple/>
    <output id="list"></output>

    <p id="demo"></p>

    <script>
      function handleFileSelect(evt) { 
        // grab the file that was uploaded which is type File. 
        // evt is the event that was triggered
        // evt.target returns the element that triggered the event 
        // evt.target.files[0] returns the file that was uploaded, type File
        var file = evt.target.files[0]; 

        var myArray = [];
        // instantiate a FileReader object to read/save the file that was uploaded
        var reader = new FileReader();
          // when the load event is fired (the file has finished uploading) this function is called
        reader.onload = function(event) {
          // the result attribute contains an ArrayBuffer representing the file's data. 
          var arrayBuffer = event.target.result;
          myArray = arrayBuffer.slice(0);
          document.getElementById("demo").innerHTML = arrayBuffer.byteLength;
        }

        // read the file and save as an array. Once the read is finished loadend is triggered
        reader.readAsArrayBuffer(file);
        console.log(myArray.byteLength);
      }

      //console.log(myArray.byteLength);
      document.getElementById('file').addEventListener('change', handleFileSelect, false);
    </script>
</body>

kgui
  • 4,015
  • 5
  • 41
  • 53

3 Answers3

6

onload happens asynchronously. So whatever logic depends on myArray needs to happen within that onload function.

    reader.onload = function(event) {
      var arrayBuffer = event.target.result;
      var myArray = arrayBuffer.slice(0);
      document.getElementById("demo").innerHTML = arrayBuffer.byteLength;

      // this needs to happen here
      console.log(myArray.byteLength);
    }

    reader.readAsArrayBuffer(file);

This is very, very similar to the often asked question (regarding AJAX/async callbacks) How to return value from an asynchronous callback function?

By the way, this is asynchronous because we don't want to block the entire user interface while waiting for the potentially long operation of reading a file. That's why we're using an onload handler here.

Community
  • 1
  • 1
Josh Beam
  • 19,292
  • 3
  • 45
  • 68
  • 2
    does that mean I can't use myArray outside of that function? I would like to echo the contents of it onto the screen and just have that string available to use to create thinks and such. – kgui Jan 06 '16 at 01:21
  • @Crt, correct. All that logic needs to happen inside of the callback. – Josh Beam Jan 06 '16 at 01:22
1

Check this code .. i think you will understand what was your mistake 

<body>
    <input type="file" id="file" name="files[]" multiple/>
    <output id="list"></output>

    <p id="demo"></p>
    <p id="log"></p>

    <script>
      function onReadFinish(result){
      console.log("Read Finished: "  + result.byteLength);
         document.getElementById("log").innerHTML = "Read Finished: "  + result.byteLength;
      }
      function handleFileSelect(evt) { 
        // grab the file that was uploaded which is type File. 
        // evt is the event that was triggered
        // evt.target returns the element that triggered the event 
        // evt.target.files[0] returns the file that was uploaded, type File
        var file = evt.target.files[0]; 

        var myArray = [];
        // instantiate a FileReader object to read/save the file that was uploaded
        var reader = new FileReader();
          // when the load event is fired (the file has finished uploading) this function is called
        reader.onload = function(event) {
          // the result attribute contains an ArrayBuffer representing the file's data. 
          var arrayBuffer = event.target.result;
          myArray = arrayBuffer.slice(0);
          onReadFinish(myArray);
          document.getElementById("demo").innerHTML = arrayBuffer.byteLength;
        }

        // read the file and save as an array. Once the read is finished loadend is triggered
        reader.readAsArrayBuffer(file);
        
      }

      //console.log(myArray.byteLength);
      document.getElementById('file').addEventListener('change', handleFileSelect, false);
    </script>
</body>
Saltuk
  • 1,159
  • 9
  • 12
1

Hey there not sure if this would help anyone, I was trying this in angular 11. Since onload happens asynchronously. we need to use observable to return the final object which is being processed in the reader.onload block.

calledFunction(event){
    const file = event.target.files[0];
    reader.readAsArrayBuffer(file);
    return New Observable((subscriber: any)=>{
        reader.onload = function(event) {
          var arrayBuffer = event.target.result;
          var myArray = arrayBuffer.slice(0);
          document.getElementById("demo").innerHTML = arrayBuffer.byteLength;
    
          subscriber.next(myArray) // myArray object will be returned to the calling function
          subscriber.complete(); // Complete the subscriber
        }
    })
}

now you can call this function anywhere you want as service or function call

calledService.calledFunction(event).subscrib(result=>{
    console.log(result)
    // To do your logic based on the result object
})
Pradeep Yenkuwale
  • 181
  • 3
  • 12