reading txt file into a textarea using javascript

Question

Here is my html and javascript code using document.ready function html script here...

<textarea id="recipients" name="recipients" class="form-control"></textarea>
<input name="file" type="file" id="files" class="form-control" value=""> 
<a id="fetch_number" class="btn btn-primary btn-sm" href="">pull text file</a>

Here is the javascript code:

$(document).ready(function() {
   $('#fetch_number').on('click', function() {
      var files = document.getElementById('files').files;
      if (!files.length) {
         alert('Please select a file!');
         return;
      }   

      if (window.File && window.FileReader && window.FileList && window.Blob) {
         var text_file = document.getElementById('files');
         var files = text_file.files;

         var file = files[0];
         var extension = file.name.split('.').pop();
         var start = 0;
         var stop = file.size - 1;

         var reader = new FileReader();
         reader.onload = function(e){
                var output = e.target.result;
                output = output.split("/\r\n|\n/");
                var string = '';
                for (var i=0; i < output.length; i++) {
                   var data = allTextLines[i].split(',');
                   string = data[1] + ',';
                }   

               return string;

              $("#recipients").text(string);
         };

      } else {
            alert('The File APIs are not fully supported by your browser.');
    }
 });
});

Here is the javascript code I don't know what to do anymore if I do not browse for any text file it gives me response for the (!files.length) , but I do not know why others don't work.

Possible duplicate of Load text from local .txt file into html textarea using JavaScript — Gavriel
– Gavriel, Commented Feb 3, 2016 at 22:26
it depends on where you are trying to run this code, if you are running a simple web page in a browser, then it just won't allow you to read any third party from your file system without user's approval. in which case this is the file selection via native dialog in the browser. — Eugene Hauptmann
– Eugene Hauptmann, Commented Feb 3, 2016 at 22:27
i also tried document.getElementById("recipients").value = string; instead of $("#recipients").text(string); — jhortsy
– jhortsy, Commented Feb 3, 2016 at 22:39

Paul S. · Accepted Answer · 2016-02-03 22:41:57Z

0

You are having problems because

You are trying to invoke code after the line return string;
You tried to return from an asynchronous function

Try something like this instead

function readTextFile(file, callback, encoding) {
    var reader = new FileReader();
    reader.addEventListener('load', function (e) {
        callback(this.result);
    });
    if (encoding) reader.readAsText(file, encoding);
    else reader.readAsText(file);
}

function fileChosen(input, output) {
    if (input.files && input.files[0]) {
        readTextFile(
            input.files[0],
            function (str) {
                output.value = str;
            }
        );
    }
}

$('#files').on('change', function () {
    fileChosen(this, document.getElementById('recipients'));
});

<textarea id="recipients" name="recipients" class="form-control"></textarea>
<input name="file" type="file" id="files" class="form-control" value="">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

answered Feb 3, 2016 at 22:41

Paul S.

66.6k9 gold badges130 silver badges143 bronze badges

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

2 Comments

jhortsy Over a year ago

thanks, it work perfect,, but the project am writting is a mobile phone book, so i need to pull phone numbers from the text file and add comma to all phone numbers automatically before display on the textarea, so i used this code

output = output.split("/\r\n|\n/");                 var string = ''; for (var i=0; i < output.length; i++) {             var data = allTextLines[i].split(',');             string = data[1] + ',';         }

how do i join it with the code above

jhortsy Over a year ago

here is the modification

function fileChosen(input, output) {     if (input.files && input.files[0]) {         readTextFile(             input.files[0],             function (str) { 				var allTextLines = str.split(/\r\n|\n/); 				var string = '';             for (var i=0; i < allTextLines.length; i++) {                  var data = allTextLines[i].split(',');                 string = data[i] + ',';              }                 output.value = string;             }         );     } }

the output displayed is undefined

Collectives™ on Stack Overflow

reading txt file into a textarea using javascript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related