How to read a local text file in the browser?

Reading a local text file in the browser is a handy way to let users upload and view files without sending them to a server. But how exactly can a web page access and display the contents of a file stored on your computer?

The easiest and most secure way is by using the File API in JavaScript, combined with an element:

First, add a file input element to your HTML:

Then use JavaScript to read the selected file:

const fileInput = document.getElementById('fileInput');

const fileContent = document.getElementById('fileContent');

fileInput.addEventListener('change', () => {

  const file = fileInput.files[0];

  if (file) {

    const reader = new FileReader();

    reader.onload = function(e) {

      fileContent.textContent = e.target.result;

    };

    reader.readAsText(file);

  }

});

Key points to remember:

• The File API only allows reading files selected by the user for security reasons — you can’t arbitrarily read files from the user’s system.
  
• FileReader.readAsText() reads the file and triggers the onload event when done.
  
• You can display the contents inside any HTML element, such as

   to preserve formatting.
  
  

Why use this method?

• It keeps the user in control — no files are uploaded anywhere.
  
• It works smoothly in all modern browsers.
  
• It’s great for apps like text editors, data importers, or preview tools.
  

So, by combining a file input with the File API, you can easily read and display local text files right in the browser without extra server steps.