Reading Text Files With Javascript | Task

Ole Ersoy
Feb - 14  -  1 min

Scenario

We have a markdown text file markdown.md and we want to read the contents of it using Javascript.

Approach

Place a load button on the page. See this for an example:

Create an event listener:

function onFileSelect(event) {
    this.selectedFile = event.target.files[0];
    const reader = new FileReader();
    reader.onload = (e) => {
        const text = reader.result.toString().trim();
        console.log(text);
    }
    reader.readAsText(this.selectedFile);
}

Hook up an event listener:

const button:HTMLInputElement = document.getElementById('file-button-id');
button.addEventListener('change', onFileSelect, false);

Test

Add this content to a text file:

## This is a markdown file

And open the text file with the button.

Demo