HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text file viewer</title>
  <style>
    body { font-family: Georgia, serif; max-width: 42rem; margin: 2rem auto; padding: 0 1rem; line-height: 1.6; }
    h1 { font-family: system-ui, sans-serif; }
    pre { background: #fffbeb; border: 1px solid #fde68a; padding: 1rem; border-radius: 8px; min-height: 8rem; white-space: pre-wrap; word-break: break-word; }
    .toolbar { font-family: system-ui, sans-serif; margin-bottom: 1rem; }
  </style>
</head>
<body>
  <h1>Text file viewer</h1>
  <div class="toolbar">
    <input type="file" id="fileInput" accept=".txt,text/plain">
  </div>
  <pre id="fileContent">Select a text file to view its contents.</pre>
  <script>
    document.getElementById("fileInput").addEventListener("change", function (event) {
      var file = event.target.files[0];
      var output = document.getElementById("fileContent");

      if (!file) {
        output.textContent = "No file selected.";
        return;
      }

      var reader = new FileReader();

      reader.onload = function (e) {
        output.textContent = e.target.result;
      };

      reader.onerror = function () {
        output.textContent = "Could not read file: " + (reader.error ? reader.error : "unknown error");
      };

      reader.onabort = function () {
        output.textContent = "File read was cancelled.";
      };

      output.textContent = "Reading " + file.name + "…";
      reader.readAsText(file);
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

JavaScript File Handling — text viewer with errors (Try It)