CODEWITHSUNDEEP
javascriptjqueryhtml
harsha kumar Reddy
harsha kumar Reddy

Reputation: 1396

FileReader returning undefined for File object in JQuery

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>

Upvotes: 3

Views: 4032

Answers (2)

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94409

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">

Upvotes: 8

John Pavek
John Pavek

Reputation: 2675

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);

Upvotes: 4

Related Questions