Stop 06 · Browser APIsTopics · 10/13

File API

In short

Uploading a profile photo, previewing a resume before submitting, reading a CSV of marks. The File API lets your page work with files the user picks.

Lets JavaScript read the contents of files a user selects or drags in — the basis of file upload previews, drag-and-drop uploads and client-side file parsing. File objects expose metadata and content for user-selected files, while Blob provides a general representation of immutable binary data.

The jaadu mascot hands a folder of documents through an admission counter window.

Think of it like this

Handing documents at the admission counter

The clerk can only see documents you hand over. She can't walk into your house and pick some. Websites are the same: they get only the files the user chooses, through a file picker or a drop.

Watch it happen

Previewing a photo before upload

User

Browser

Your page

picks selfie.png

1/6The user chooses a file in the system picker. Your page never sees their folders.

The big ideas

What you need to know

User picks the file

<input type="file"> opens the picker. Your code then gets the chosen files from input.files.

File has details

Each File has name, size (in bytes) and type, like image/png. Check these before uploading.

Read with promises

await file.text() reads text files. file.arrayBuffer() gives raw bytes for anything else.

Instant previews

URL.createObjectURL(file) makes a temporary URL you can use as an image src, with no upload needed.

See it in code

Walk through the code

1const input = document.querySelector("#photo"); // <input type="file" accept="image/*">2const MAX = 2 * 1024 * 1024; // 2 MB3 4input.addEventListener("change", () => {5  const file = input.files[0];6  if (!file) return;7  if (!file.type.startsWith("image/")) return alert("Please pick an image");8  if (file.size > MAX) return alert("Max size is 2 MB");9 10  const url = URL.createObjectURL(file);11  preview.src = url;12  preview.onload = () => URL.revokeObjectURL(url); // free memory13});

1/4Grab the file input and set a 2 MB limit in bytes.

accept="image/*" only filters the picker. Users can still choose other files, so always check type and size in code.

Save yourself the pain

Common mistakes

Oops

Trusting accept and the file name as your only check.

Do this instead

Check type and size in the browser for a nice UX, and check again on the server for real security.

Oops

Creating object URLs and never revoking them.

Do this instead

Call URL.revokeObjectURL once the image has loaded, or memory keeps piling up.

Your mission

Photo preview before upload

~25 min

Quick check

Can a website read files from the user's Downloads folder without the user picking them?

Go deeper

1Build a file input that previews a selected image before upload. Keep the first version small, then add one improvement after the core behavior works.
2Use `FileReader` to read a text or CSV file's contents in the browser. Verify the behavior with realistic data and handle the failure or empty state as well.
3Learn `File`, `Blob` and `FileReader` — the three core pieces of this API.