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.