FileReader returning undefined for File object in JQuery

Question

Can some one tell me why when all the File attributes are printed properly why FileReader.readAsArrayBuffer() is returning undefined in the following code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
 <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $( document ).ready(function() {

         $( "#form" ).submit(function( event ) {
              event.preventDefault();   
             var filevar=document.getElementById("file").files[0];   
             var reader=new  FileReader() ;
             console.log(filevar.name);
             console.log(filevar.size);
             console.log(filevar.type);
             var file_contents= reader.readAsArrayBuffer(filevar);
             console.log(file_contents);      

        });   
    });

    </script>
<body>
<form   action="" method="POST" id="form">
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname"><br>
 Choose File : <input name="myFile" type="file" id="file">

<input type="submit" id="submit">
</form>
</body>

</html>

Reading a file is asynchronous. You have to wait until it's done. — Derek 朕會功夫
– Derek 朕會功夫, Commented Feb 28, 2018 at 15:06
Your script tags should be inside the head tag. Before anything else, let's make sure you have proper HTML. :) — Tyler
– Tyler, Commented Feb 28, 2018 at 15:07

Derek 朕會功夫 · Accepted Answer · 2018-06-07 18:35:17Z

Reading a file is asynchronous. You have to wait until it's done.

var reader = new FileReader();
reader.onload = function(e){
    let value = e.value;  // alternatively reader.result
    // do stuff with your value
};
reader.readAsArrayBuffer(filevar);

.readAsArrayBuffer does not return anything.

Alternatively, you can set up an async function for that so you don't have to use callbacks:

function readFile(file){
    return new Promise((res, rej) => {
        // create file reader
        let reader = new FileReader();
        
        // register event listeners
        reader.addEventListener("loadend", e => res(e.target.result));
        reader.addEventListener("error", rej);
        
        // read file
        reader.readAsArrayBuffer(file);
    });
}

async function main(file){
    // read file into typed array
    let fileArrayBuffer = new Uint8Array(await readFile(file));
    // do things with it
    console.log(fileArrayBuffer);
}

// register event listener for input
document.querySelector("input[type=file]").addEventListener("change", e => {
    let file = e.target.files[0];
    main(file);
});

<input type="file">

John Pavek · Accepted Answer · 2018-02-28 15:08:38Z

4

FileReader is actually an async function. Some files are larger than others and so you do not want to lock the main thread.

If you want to see the result of the file. You should add a call back to the onload function of the reader.

var reader = new FileReader();
reader.onload = function(completionEvent) { 
  console.log(completionEvent); 
  // Set the result to whatever you need it as
}

reader.readAsArrayBuffer(filevar);

answered Feb 28, 2018 at 15:08

John Pavek

2,5853 gold badges17 silver badges36 bronze badges

Collectives™ on Stack Overflow

FileReader returning undefined for File object in JQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related