JavaScript Academy · Lesson

Dragging Files into the Page

Handle files dropped from the desktop.

Dragging Files into the Page is a free JavaScript Academy lesson on CoddyKit — lesson 4 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.

Files from the Desktop

Beyond moving elements, the Drag and Drop API lets users drag files from their operating system into your page — the foundation of upload drop zones.

Accepting File Drops

The setup mirrors element drops: prevent default on dragover and drop. The difference is reading files instead of getData.

dropzone.addEventListener("dragover", (e) => e.preventDefault());

dataTransfer.files

On drop, e.dataTransfer.files is a FileList of dropped File objects.

dropzone.addEventListener("drop", (e) => {
  e.preventDefault();
  const files = e.dataTransfer.files;
  console.log(files.length, "file(s) dropped");
});

Iterating Files

A FileList is array-like. Convert it with the spread operator to iterate with array methods.

const files = [...e.dataTransfer.files];
files.forEach((file) => {
  console.log(file.name, file.size, file.type);
});

File Metadata

Each File exposes name, size (bytes), type (MIME), and lastModified without reading its contents.

console.log(file.name);          // "photo.png"
console.log(file.type);          // "image/png"
console.log(file.size);          // 20481

Filtering by Type

Validate dropped files before processing — for example, accept only images.

const images = files.filter((f) => f.type.startsWith("image/"));
if (images.length === 0) console.log("No images dropped");

Reading File Contents

Use FileReader to read a file. readAsText for text, readAsDataURL for previews.

const reader = new FileReader();
reader.onload = () => console.log(reader.result);
reader.readAsText(file);

Previewing Dropped Images

URL.createObjectURL(file) gives an instant preview URL without reading the whole file. Revoke it when done to free memory.

const url = URL.createObjectURL(file);
img.src = url;
img.onload = () => URL.revokeObjectURL(url);

items vs files

dataTransfer.items is richer than files: each DataTransferItem reports kind ("file" or "string") and can yield a file or directory entry.

for (const item of e.dataTransfer.items) {
  if (item.kind === "file") {
    const file = item.getAsFile();
    console.log(file.name);
  }
}

Uploading Dropped Files

Wrap files in FormData and POST them to your server.

const form = new FormData();
files.forEach((f) => form.append("files", f));
fetch("/upload", { method: "POST", body: form });

Preventing Accidental Navigation

If a file is dropped outside your zone, the browser navigates to it. Guard the whole document to stop that.

window.addEventListener("dragover", (e) => e.preventDefault());
window.addEventListener("drop", (e) => e.preventDefault());

Quick Check

Test file drops.

Recap: Dragging Files In

You built a file drop zone, read dataTransfer.files, inspected metadata, filtered by type, previewed images with object URLs, used FileReader, uploaded with FormData, and prevented accidental navigation. That completes Drag and Drop.

Frequently asked questions

Is the “Dragging Files into the Page” lesson free?

Yes — the full text of “Dragging Files into the Page” 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 “Dragging Files into the Page”?

Handle files dropped from the desktop. 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 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Dragging Files into the Page” 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