FileReader read file undefined result

Question

I wish to read the contents of an upload file into a Javascript variable.

The program used to work using file.getAsBinary but this is now deprecated and needs to be updated to use FileReader()

A form has a file upload selection an onsubmit runs a function uploadDB() in a javascript.

The variable dbname is passed okay as is the file name from the upload selection I can see it with an alert or console.log.

The final bfile variable to receive the file text is undefined. I have tried both readAsText and ReadAsBinary but bfile is undefined. The var declaration is in function uploadDB() and should be global to the inner function. If scope is somehow a problem how do I get the result in the bfile variable.

Its probably simple but I cannot get it to work. Can someone suggest something please. The html section is;

<form onsubmit="uploadDB()"; method="post">
Database <input type=text name="dbName" id="dbName" size=20>
<input type=file id="metaDescFile" size=50 >
<input type=submit value="Submit">
</form>

The js script is similar to (extraneous stuff edited out);

<script language="javascript" type="text/javascript">
<!--
    var uploadDB = function() {
        var input = document.getElementById('metaDescFile');
        var fname = document.getElementById('metaDescFile').value;
        var file=input.files[0];
        var bfile;

        reader = new FileReader();

        reader.onload = function(e) {  bfile = e.target.result }
        reader.readAsText(file);
        alert(bfile);   // this shows bfile as undefined


        // other stuff
    }

eikes · Accepted Answer · 2013-01-09 00:02:15Z

6

as bfile gets set in the onload callback you won't be able to access outside that callback because the code is evaluated before the callback is fired.

Try this:

reader = new FileReader();
reader.onload = function(e) {  
  bfile = e.target.result 
  alert(bfile);   // this shows bfile
}
reader.readAsText(file);

answered Jan 9, 2013 at 0:02

eikes

5,1112 gold badges33 silver badges32 bronze badges

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

3 Comments

Keir Over a year ago

You are right and the alert shows the file but how do I get the variable visible outside the onload() function. I intend to call a cgi script and pass the file. If I do that within the function but it seems wrong to have a non returning function. Would prefer to do it after the funtion.

eikes Over a year ago

As I said, the code outside the function is executed before the file is read. JavaScript is a event driven language, this is just how it works.

Steven Muganwa Over a year ago

I'm trying to read an ics file on ios(React Native), the e.target.result is undefined inside the onload() function. It's perfectly fine on Android.

Etienne Salimbeni · Accepted Answer · 2021-11-29 14:57:07Z

Here is one answer to get the actual final byte array , just using FileReader and ArrayBuffer :

 const test_function = async () => {

      ... ... ...

      const get_file_array = (file) => {
          return new Promise((acc, err) => {
              const reader = new FileReader();
              reader.onload = (event) => { acc(event.target.result) };
              reader.onerror = (err)  => { err(err) };
              reader.readAsArrayBuffer(file);
          });
       }
       const temp = await get_file_array(files[0])
       console.log('here we finally ve the file as a ArrayBuffer : ',temp);
       const fileb = new Uint8Array(fileb)

       ... ... ...

  }

where file is directly the File object u want to read , notice that this is an async function...

Collectives™ on Stack Overflow

FileReader read file undefined result

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related