Vanilla JavaScript Projects

Project 62, Forms and input

File Upload Dropzone

The upload box every form eventually needs. Drop files in, see what you picked, and know right away if a file is too big or the wrong type.

Main API
File API
Previews
URL.createObjectURL
Dependencies
None
Your browser
Checking

Upload files

Drop images or PDFs in the box, click it, or paste an image. Files over 5 MB or of other types are refused with a reason.

Drop files here or click to chooseImages (JPG, PNG, WebP) or PDF, up to 5 MB each, 8 files at most
    No files yet

    How it works

    1. Accept files three waysClick opens the file picker, dropping uses the drop event, and pasting reads clipboard files. All three go to one add function.
    2. Check before uploadEach file is checked for type and size right away, so people see the problem before they wait for anything.
    3. Preview without uploadingURL.createObjectURL shows a local image preview instantly. The URL is revoked when the file is removed.
    zone.addEventListener("drop", (e) => {
  e.preventDefault();
  for (const file of e.dataTransfer.files) {
    if (!["image/png", "image/jpeg", "application/pdf"].includes(file.type)) continue;
    if (file.size > 5 * 1024 * 1024) continue;           // 5 MB limit
    const img = new Image();
    img.src = URL.createObjectURL(file);                  // instant preview
    list.append(img);
  }
});
// real upload: fetch("/upload", { method: "POST", body: formData })