JavaScript Academy · Lesson

Reading Files with FileReader

Read selected files as text or data URLs.

Reading Files with FileReader is a free JavaScript Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Is FileReader?

FileReader is a browser API that reads the contents of File and Blob objects asynchronously. You get a file from an <input type="file"> and read it into text, a data URL, or binary.

Getting a File From Input

A file input exposes a files list. The first selected file is at index 0, with useful properties like name, size, and type.

const input = document.querySelector('#picker');
const file = input.files[0];

console.log(file.name);
console.log(file.size);
console.log(file.type);

Reading Is Asynchronous

FileReader does not return data directly. You attach an onload handler, then call a read method. The result arrives later in reader.result.

const reader = new FileReader();
reader.onload = function () {
  console.log('done reading');
  console.log(reader.result);
};
reader.readAsText(file);

readAsText

readAsText decodes the file as a text string, ideal for .txt, .csv, or JSON files.

const reader = new FileReader();
reader.onload = () => {
  console.log('contents:', reader.result);
};
reader.readAsText(textFile);

readAsDataURL

readAsDataURL produces a base64 data: URL. This is perfect for previewing an image by assigning it to an img.src.

const reader = new FileReader();
reader.onload = () => {
  const img = document.querySelector('#preview');
  img.src = reader.result;
  console.log(reader.result.slice(0, 30));
};
reader.readAsDataURL(imageFile);

readAsArrayBuffer

readAsArrayBuffer gives raw binary data as an ArrayBuffer, useful for parsing file formats byte by byte.

const reader = new FileReader();
reader.onload = () => {
  const bytes = new Uint8Array(reader.result);
  console.log('byte count:', bytes.length);
  console.log('first byte:', bytes[0]);
};
reader.readAsArrayBuffer(binaryFile);

Handling Errors

Attach an onerror handler to catch read failures, for example when a file is unreadable.

const reader = new FileReader();
reader.onerror = () => {
  console.log('read failed:', reader.error.name);
};
reader.onload = () => console.log('ok');
reader.readAsText(file);

Tracking Progress

For large files, the onprogress event reports how many bytes have loaded so far, useful for progress bars.

const reader = new FileReader();
reader.onprogress = (event) => {
  if (event.lengthComputable) {
    const percent = (event.loaded / event.total) * 100;
    console.log('loaded ' + percent.toFixed(0) + '%');
  }
};
reader.readAsArrayBuffer(bigFile);

Wrapping in a Promise

The event-based API is clunky. Wrap it in a Promise so you can use await for cleaner code.

function readText(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(reader.error);
    reader.readAsText(file);
  });
}

readText(file).then(text => console.log(text));

Modern Alternative: file.text()

Modern browsers let you call file.text(), file.arrayBuffer(), or file.stream() directly, returning Promises. These are simpler than FileReader for many cases.

async function show(file) {
  const text = await file.text();
  console.log(text);
}

show(file);

Why FileReader Matters

FileReader lets you process user-selected files entirely in the browser: preview images, parse CSVs, or validate uploads before sending. Choose the read method by the data you need: text, data URL, or binary. Next you will explore Blobs and object URLs.

const reader = new FileReader();
reader.onload = () => console.log('ready to upload');
reader.readAsDataURL(file);

Quick Check

Which FileReader method gives you a base64 string suitable for an image preview src?

Recap: Reading Files

You learned to read file contents:

Get files from input.files; reading is asynchronous via onload.
readAsText, readAsDataURL, and readAsArrayBuffer return different formats.
Handle onerror and onprogress for robustness.
Modern file.text() and file.arrayBuffer() are Promise-based alternatives.

Frequently asked questions

Is the “Reading Files with FileReader” lesson free?

Yes — the full text of “Reading Files with FileReader” is free to read here on the web, and the JavaScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “Reading Files with FileReader”?

Read selected files as text or data URLs. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start JavaScript Academy?

No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Reading Files with FileReader” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this JavaScript Academy lesson?

Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to JavaScript Academy