Assign given text file string to variable with JavaScript completely client side

Question

I am trying to create an almost completely client side project that reads a given text file with a function and returns the contents of a file (as a string) to a variable. Some of these files may be VERY VERY large if that makes any difference on approaches. I would like a function that would perform like...

// fileInputID is the input type='file' id
var fileText = ReadTextFromFile('fileInputID');

So far I have something like this which doesn't do what I want, but it is as close as I can get so far...

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <input type="file" id="xFile" value="Get Data">
    <script>
      // A non-blocking sleep function (I think)
      function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
      };
      async function ReadFile(fileInputID) {
        // Get the selected file from the input id.
        var file = document.getElementById(fileInputID).files[0];
        var str = "";
        var fileReader = new FileReader();
        fileReader.onloadend = function(evt) {
          str += fileReader.result;
        };
        // Read the file.
        fileReader.readAsText(file);
        // Wait for file to be completely read.
        do {
          await sleep(100);
        } while (fileReader.readyState != 2);
        console.log(str);         // Correctly prints the string.
        console.log(typeof str);  // Type of str is String.
        return str;               // OH NO! Doesn't send anything back?
      }
    </script>
    <div id="output"></div>
    <button id="output" onclick="var fileText = ReadTextFromFile('xFile'); console.log(fileText);"></button>
  </body>
</html>

I would really like to not have to send it to the server, just to have it sent back again. Also, I want it to stay a returning function instead of trying to save it to a global variable so it may stay more dynamic. Any ideas would greatly help.

Would really like to end up with something possible like...

var xData = ReadTextFromFile('xFile');   
var yData = ReadTextFromFile('yFile');   
plot(xData, yData);

Jonas Wilms · Accepted Answer · 2018-09-03 20:24:54Z

1

Yes promises are the right approach, but that polling is a bit ugly. Instead just do:

 function readFileFrom(fileInputID) {
   return new Promise((resolve, reject) => {
     var file = document.getElementById(fileInputID).files[0];
     var fileReader = new FileReader();
     fileReader.onloadend = function(evt) {
         resolve(fileReader.result);
      };
      // Read the file.
      fileReader.readAsText(file);
   });
 }

Now to use that just await the result:

 (async function() {
   const fileText = await readFileFrom("id");
 })();

edited Sep 3, 2018 at 20:24

answered Sep 3, 2018 at 19:23

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

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

3 Comments

bordenmike518 Over a year ago

Thanks for the quick response! Really like this approach. Though, I am now getting an error Uncaught SyntaxError: await is only valid in async function. I thought adding async to the function would help to no avail.

Jonas Wilms Over a year ago

@bordenmike518 the await has to be inside an async function.

bordenmike518 Over a year ago

Got it working with your code and a little elbow grease! Thanks!

Ashton Wiersdorf · Accepted Answer · 2018-09-04 16:04:13Z

1

You're using an async function. This means that a call to ReadFile() will return a Promise, which will call back if the code inside the function returns. However, in your case it might be simpler to just pass in a callback to ReadFile() and not worry about Promises.

A callback is a function that you will call with the str variable inside the function once it's been computed:

async function ReadFile(fileInputID, callback) {    
    //... folded for clarity    
    console.log(str);       // Correctly prints the string
    console.log(typeof str);
    callback(str); // call the callback with the computed value
}

ReadFile("xFile", function (txt) { 
   do_something_with_text(txt); 
});

This will call do_something_with_text once the file has been read. At this point you can make calls to update your DOM, fire of AJAX calls, etc.

Using asynchronous calls like that has many benefits (e.g. your site doesn't hang while it's reading large files, etc.) but comes at the cost of added complexity. It's a very powerful paradigm. I hope that helps!

edited Sep 4, 2018 at 16:04

answered Sep 3, 2018 at 19:30

Ashton Wiersdorf

2,0702 gold badges18 silver badges37 bronze badges

5 Comments

bordenmike518 Over a year ago

Wouldn't that make continuation a callback? The only issue I see with this is that I couldn't easily go.. var xData = ReadFile('xFile'); var yData = ReadFile('yFile'); plot(xData, yData); Is this even possible?

Jonas Wilms Over a year ago

A call to ReadFile returns a Promise, ReadFile itself is an AsyncFunction. And this works with promises if done right, falling back to callbacks migut complicate things here.

Ashton Wiersdorf Over a year ago

@bordenmike518 You can use currying to do what you want here: ReadFile('xFile', (xData) => ReadFile('yFile', (yData) => plot(xData, yData)). I think @Jonas Wilms solution is much better though. I come from a Scheme and Lisp background—Jonas's solution is much more idiomatic Javascript.

Ashton Wiersdorf Over a year ago

@JonasWilms Right you are! I'm not super familiar with that—your solution is much better than mine. I learned something too! ^^

bordenmike518 Over a year ago

@AshtonWiersdorf I really like that idea and am learning to much too. I come from a heavy Python background with some C, C++, Java, ...

Collectives™ on Stack Overflow

Assign given text file string to variable with JavaScript completely client side

2 Answers 2

3 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related