Output the content of a .txt file line by line-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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