How to read a file from computer using "Choose a file " in Html and store the file contents in a variable using JavaScript?

Question

I want to read a text file content in my computer into a variable using HTML/JAVASCRIPT "Choose a file" using accept=" text/plain".And print the variable value ie content of a file on screen and I also have need in using the variable for other purposes. Ie The following code is not producing output, the contents of the file is not getting transferred to the variable b during b=fa(event);.Can somebody help me in transforming the below code ?

<html>
<body>

<form name="prototype"   action="pro.html"  method="post">

<input type='file'  accept='text/plain' ><br>
<input type="submit" onsubmit="pass()" value="submit" />
<div id='output'>

</form>

 <script>

 function pass()
 {
 var b;
 b=fa(event);
 document.write("\n  <br> <br> Contents=   ",b);
 }


 function fa(event) {
    var input = event.target;

    var reader = new FileReader();
    var a;
    reader.onload = function(){
    var text = reader.result;
    var node = document.getElementById('output');
    node.innerText = text;
    a=reader.result.substring(0, 200);
    return a;
    }

    reader.readAsText(input.files[0]);

     } 



     </script>



     </body>
      </html>

Serene Abraham Mathew · Answer 1 · 2019-03-23T08:49:55.713

There are muliple issues with your code

First You have to understand that reader.onload function is asynchronous and executes at a later point after calling fa function

So b=fa(event); doesnt asingn contents of files to var b

Other problems and suggestions are written in snippet itself

NB : if you want to display contents of file only after form submit use can use callback

  //pass an anonymous  function to fa function 
  fa(function(result){
    var fileConent;
    fileConent = result;
    console.log(fileConent)
    //execute whatever you want to do 
  });

And in fa function

function fa(callback) {

    var input = document.getElementById("fileInput")

    var reader = new FileReader();
    var a;
    reader.onload = function(){
    var text = reader.result;
    var node = document.getElementById('output');
    node.innerText = text;
    a=reader.result.substring(0, 200);
    //executes function passed as parameter 
    // now you will get contents in pass function 
    callback(a)
    }

    reader.readAsText(input.files[0]);

}

Dont forget to add id fileInput to input type='file'

//declare fileConent as global so that any function can access it
var fileConent;

function pass(event)
 {
  //prevent submitting the form else you will jump to "pro.html" and you miss what you want before submitting form
  event.preventDefault();
  //on submit do hwtever you want with file content
  document.write("\n  <br> <br> Contents=   ",fileConent);
 }




function fa(event) {
    var input = event.target;

    var reader = new FileReader();
    //var a;
    reader.onload = function(){
    var text = reader.result;
    var node = document.getElementById('output');
    node.innerText = text;
    //set contents of file in global variable so pass function   can acess it 
    fileConent=reader.result.substring(0, 200);
    
    //return function doesnt work beacuse onload functioin is asynchronous
    //return a;
    }

    reader.readAsText(input.files[0]);

}

<html>
<body>

<!-- onsubmit is attribute of  form not submit button -->
<form name="prototype"   action="pro.html"  method="post"  onsubmit="pass(event)">
<!-- added onchange handler as fa function to file input  
beacuse it is better to display contents of file on file input cahnge tan on form submit-->
<input type='file'  accept='text/plain' onchange="fa(event)" ><br>
<input type="submit" value="submit" />
<div id='output'></div>

</form>


</body>
</html>

Can you explain what was changed and why? – jhpratt Mar 23 '19 at 07:21 — jhpratt, Mar 23 '19 at 07:21
Sorry Im a very late but I commented Changes – Serene Abraham Mathew Mar 23 '19 at 08:24 — Serene Abraham Mathew, Mar 23 '19 at 08:24

score 0 · Answer 2 · answered Mar 23 '19 at 07:23

Your issue is that you never stopped your form from submitting using event.preventDefault(), and so your form submitted without the JavaScript having time to take effect.

The better way to do this is to catch the submit event triggered when you submit a form, and adding your own custom code to it. Here's an example:

document.querySelector('form').addEventListener('submit', handleSubmit)  // Attach `handeSubmit` func to `submit` event

function handleSubmit(event) {
    event.preventDefault();  // Prevent form from submitting
    
    var input = this.querySelector('input[type="file"]');
    var output = document.getElementById('output');

    var reader = new FileReader();
    /* var a */;
    
    reader.onload = function(){
      output.innerText = reader.result;
      /* a=reader.result.substring(0, 200);
      return a; */
      
      // Whatever you need to do last can be done here.
    }

    reader.readAsText(input.files[0]);
}

<form name="prototype" action="pro.html" method="post">
  <input type='file' accept='text/plain' />
  <br>
  <input type="submit" value="submit" />
</form>

<div id='output'>

How to read a file from computer using "Choose a file " in Html and store the file contents in a variable using JavaScript?

2 Answers2