JavaScript File Handling

What You’ll Learn

File handling lets web apps work with files the user chooses—text notes, images, CSV exports, and more. This tutorial covers the browser File API, FileReader, validation, security basics, and five hands-on examples you can run in the Try-it editor.

Introduction

JavaScript file handling is how you read and process files inside a web page or on a server. In the browser, users pick a file from their device; your script receives a File object and can inspect metadata or read the contents without reloading the page.

This guide focuses on client-side file handling with the File API and FileReader—the skills you need for previews, local parsing, and upload validation. We also touch on Node.js fs so you know where server-side reading and writing happens.

What Is File Handling in JavaScript?

File handling means working with file data programmatically: reading text, previewing images, checking size limits, or preparing a file for upload. In the browser, JavaScript never gets free access to the user’s hard drive—the user must choose each file through a trusted picker or drag-and-drop zone.

Once selected, a File extends Blob with a name and lastModified date. You read bytes with FileReader or modern promise helpers like file.text() and file.arrayBuffer().

Key Features

• User-driven access — files come from explicit user action, not silent disk scans.
• Asynchronous reads — large files load in the background so the page stays responsive.
• Text and binary — read plain text, base64 data URLs, or raw ArrayBuffer bytes.
• Form integration — pair with <input type="file"> and optional drag-and-drop.

Client-Side vs Server-Side

• Browser (File API) — read files locally for preview or validation before upload.
• Node.js (fs) — read and write files on the server filesystem; never expose raw server paths to the client.

Usage — File Input and FileReader

Start with an HTML file picker, then listen for the change event:

<input type="file" id="fileInput" accept=".txt,text/plain">

Capture the selected file in JavaScript:

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

fileInput.addEventListener("change", (event) => {
  const file = event.target.files[0];
  if (!file) return;

  console.log("Name:", file.name);
  console.log("Size:", file.size, "bytes");
  console.log("Type:", file.type || "unknown");
});

Read the file contents with FileReader:

const reader = new FileReader();

reader.onload = (event) => {
  console.log("Content:", event.target.result);
};

reader.onerror = () => {
  console.error("Read failed:", reader.error);
};

reader.readAsText(file);

📝 Common FileReader Methods

reader.readAsText(file);        // string (UTF-8 text)
reader.readAsDataURL(file);     // base64 data URL (images)
reader.readAsArrayBuffer(file); // raw binary bytes

Modern promise helpers (File/Blob)

• await file.text() — returns file contents as a string.
• await file.arrayBuffer() — returns raw bytes for binary processing.
• URL.createObjectURL(file) — creates a temporary URL for preview or download.

Important properties on File

• file.name — filename including extension.
• file.size — size in bytes.
• file.type — MIME type (may be empty for some extensions).
• file.lastModified — timestamp from the filesystem.

Examples Gallery

Each example runs in the browser. Open DevTools (F12) for console output, or use the Try-it links for a live file picker in the editor.

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

fileInput.addEventListener("change", (event) => {
  const file = event.target.files[0];
  if (!file) return;

  console.log("Selected:", file.name);
  console.log("Size (KB):", (file.size / 1024).toFixed(1));
  console.log("MIME type:", file.type || "(empty — check extension too)");
});

Selected: notes.txt
Size (KB): 2.4
MIME type: text/plain

const fileInput = document.getElementById("fileInput");
const output = document.getElementById("fileContent");

fileInput.addEventListener("change", (event) => {
  const file = event.target.files[0];
  if (!file) return;

  const reader = new FileReader();

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

  reader.readAsText(file);
});

Hello from my notes file!
Line two of the document.

const fileInput = document.getElementById("fileInput");
const preview = document.getElementById("preview");

fileInput.addEventListener("change", (event) => {
  const file = event.target.files[0];
  if (!file || !file.type.startsWith("image/")) {
    preview.removeAttribute("src");
    preview.alt = "Please choose an image file.";
    return;
  }

  const reader = new FileReader();
  reader.onload = (e) => {
    preview.src = e.target.result;
    preview.alt = "Preview of " + file.name;
  };
  reader.readAsDataURL(file);
});

The <img> element displays the selected photo before upload.

const MAX_BYTES = 1024 * 1024; // 1 MB

function validateFile(file) {
  if (file.size > MAX_BYTES) {
    return "File is too large. Max size is 1 MB.";
  }
  if (!file.type.startsWith("text/") && !file.name.endsWith(".txt")) {
    return "Only plain text files are allowed.";
  }
  return null; // valid
}

fileInput.addEventListener("change", (event) => {
  const file = event.target.files[0];
  if (!file) return;

  const error = validateFile(file);
  if (error) {
    status.textContent = error;
    fileInput.value = "";
    return;
  }

  status.textContent = "Valid file: " + file.name;
});

Valid file: readme.txt
File is too large. Max size is 1 MB.
Only plain text files are allowed.

fileInput.addEventListener("change", (event) => {
  const file = event.target.files[0];
  const output = document.getElementById("fileContent");

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

  const reader = new FileReader();

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

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

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

  output.textContent = "Reading " + file.name + "…";
  reader.readAsText(file);
});

Reading diary.txt…
(then full file text appears in <pre>)

🚀 Common Use Cases

• Image upload preview — show a thumbnail before sending to the server.
• CSV / JSON import — parse local data files without a round trip.
• Resume or document picker — validate PDF size and type on the client.
• Drag-and-drop zones — accept dataTransfer.files from drop events.
• Client-side compression — read bytes with ArrayBuffer before upload.
• Offline tools — notepad-style apps that never leave the browser until export.

Important Considerations

• No silent disk access — users must pick files; never assume a path.
• Client validation ≠ security — re-check type, size, and content on the server.
• Large files — reading multi-megabyte files into memory can freeze weak devices; consider chunking or streaming on the server.
• Empty MIME types — some OS files report file.type === ""; fall back to extension checks.
• Memory leaks — revoke blob URLs with URL.revokeObjectURL when previews change.
• Sensitive data — treat file contents as user data; avoid logging secrets to the console in production.

📝 Notes

• accept on the input filters the picker UI but can be bypassed—always validate in code.
• multiple attribute allows selecting many files; loop over files or use [...files].
• Reset the input with fileInput.value = "" so the same file can be picked again.
• FileReader is one-shot; create a new instance or call another read method for the next file.
• Node.js fs.readFile / fs.promises.readFile run on the server, not in the browser tab.
• For downloads, combine new Blob([data]) with a temporary <a download> link.

💡 Best Practices