Reading Files with FileReader
Read selected files as text or data URLs.
Reading Files with FileReader is a free JavaScript Academy lesson on CoddyKit. This is lesson 2 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, and your progress syncs across the web and the CoddyKit app. The JavaScript Academy course includes 4 lessons in total.
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 viaonload. readAsText,readAsDataURL, andreadAsArrayBufferreturn different formats.- Handle
onerrorandonprogressfor robustness. - Modern
file.text()andfile.arrayBuffer()are Promise-based alternatives.
Learn JavaScript with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 59
- Lessons
- 200
Frequently Asked Questions
Is the “Reading Files with FileReader” lesson free?
Yes — any 3 lessons of the JavaScript Academy learning path, including “Reading Files with FileReader”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The JavaScript Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.
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
- The FormData Object
- Reading Files with FileReader
- Blobs and Object URLs
- Uploading Files with Fetch