Output the content of a .txt file line by line

Question

I've created a program where the user uploads a .txt file. Now I want to create a button where I click on it and the it shows the content of the .txt file **line by line with a little delay between **

document.getElementById('inputfile')
  .addEventListener('change', function() {

    var fr = new FileReader();
    fr.onload = function() {
      document.getElementById('output')
        .textContent = fr.result;
    }

    fr.readAsText(this.files[0]);
  })

<input type="file" name="inputfile" id="inputfile">
<br>
<pre id="output"></pre>

When you say "line by line" do you mean with a little delay in between displaying each line, or do you mean keeping the lined format of the uploaded file? — Jamiec, Sep 22 '21 at 12:53
You should either use
or replace \n (new line) with
- check it here https://stackoverflow.com/questions/784539/how-do-i-replace-all-line-breaks-in-a-string-with-br-elements — Behrouz Pooladrak, Sep 22 '21 at 12:55
@Jamiec yes with a little delay. I am going to edit the question. Thank you. — , Sep 22 '21 at 12:57
@JoãoSantos: As a high-level guess, I imagine you'd break apart the `fr.result` into an array of values to display and would use something like `setTimeout` or `setInterval` to periodically appent each array element to the DOM. Have you tried anything? — David, Sep 22 '21 at 13:02

score 0 · Answer 1 · answered Sep 22 '21 at 13:02

I use a ul instead, you can play with it.

document.getElementById('inputfile')
    .addEventListener('change', function() {
        var fr = new FileReader();
        const output = document.getElementById('output');
        fr.onload = function() {
            const lines = fr.result.split('\n');
            lines.forEach((line) => {
                var li = document.createElement("li");
                li.appendChild(document.createTextNode(line))
                output.appendChild(li);
            });
        }
        fr.readAsText(this.files[0]);
    })

<input type="file" name="inputfile" id="inputfile">
<br>
<ul id="output"></ul>

score 0 · Answer 2 · answered Sep 22 '21 at 13:03

You can do this by writing a method to add one line at a time with an interval:

const displayLines = (elem, text, delay) =>{
  let lineNo = 0;
  const lines = text.split("\r\n");
  const intervalId = setInterval( () => {
      elem.textContent += (lines[lineNo++] + "\r\n");
      if(lines.length == lineNo)
          clearInterval(intervalId);
  },delay);
}

And then call this from onload. Live example below:

document.getElementById('inputfile')
  .addEventListener('change', function() {

    var fr = new FileReader();
    fr.onload = function() {
      displayLines(document.getElementById('output'), fr.result, 1000);
    }

    fr.readAsText(this.files[0]);
  })
  
  
const displayLines = (elem, text, delay) =>{
  let lineNo = 0;
  const lines = text.split("\r\n");
  const intervalId = setInterval( () => {
      elem.textContent += (lines[lineNo++] + "\r\n");
      if(lines.length == lineNo)
          clearInterval(intervalId);
  },delay);
}

<input type="file" name="inputfile" id="inputfile">
<br>
<pre id="output"></pre>

score 0 · Accepted Answer · answered Sep 22 '21 at 13:19

document.getElementById('inputfile')
    .addEventListener('change', function() {

        var fr = new FileReader();
        fr.onload = function() {
            if (!fr.result) { // if empty result do not execute below code
                return;
            }
            const resultAsArray = fr.result.split('\r\n'); // split the text into array by new line (\r\n)
            let index = 0; // Take the first line
            const displayInterval = setInterval(() => { // create an interval that executes every 1 second
                if (index === (resultAsArray.length - 1)) { // check if the current index is equal to last item index
                    clearInterval(displayInterval); // if true, exit the interval
                     return;
                }
                let html$ = document.getElementById('output').innerHTML; // capture previous html
                html$ += '<div>' + resultAsArray[index] + '</div>'; // append new line data to previous html
                document.getElementById('output').innerHTML = html$; // display the data into output element
                index++; // increment for the next line

            }, 1000);

        }

        fr.readAsText(this.files[0]);

    })

<input type="file" name="inputfile"
        id="inputfile">
<br>

<div id="output"></div>

Test text.txt file content

lorem
ipsum
generator

Output the content of a .txt file line by line

3 Answers3