hcg-file-drop

Lightweight vanilla JavaScript drag-and-drop file upload widget. Zero dependencies.

Documentation: html-code-generator.com/javascript/file-drop-library

Install

npm install hcg-file-drop

Usage

import hcgFileDrop from "hcg-file-drop";
import "hcg-file-drop/hcg-file-drop.css";

const uploader = hcgFileDrop(document.getElementById("upload-container"), {
  allowedTypes: ["image/*", ".pdf"],
  maxFiles: 5,
  showFileList: true,
  onFilesChange: (files) => console.log(files),
});

Getting files

The widget does not upload automatically. Read the current list with getFiles(), or use the onFilesChange callback when files are added or removed.

const files = uploader.getFiles();

files.forEach((entry) => {
  console.log(entry.name, entry.type, entry.size);
  // entry.file is the original File object
});

Each entry has this shape:

{
  file,   // original File object
  name,   // file name
  type,   // MIME type
  size    // size in bytes
}

Uploading files

Append each entry.file to FormData and send with fetch when you are ready:

function uploadFiles() {
  const files = uploader.getFiles();
  if (files.length === 0) return;

  const formData = new FormData();
  files.forEach((entry) => {
    formData.append("files[]", entry.file, entry.name);
  });

  fetch("/upload", { method: "POST", body: formData })
    .then((res) => {
      if (!res.ok) throw new Error("Upload failed: " + res.status);
      return res.json();
    })
    .then((data) => {
      console.log("Upload complete", data);
      uploader.reset();
    });
}

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hcg-file-drop@1/hcg-file-drop.css">
<script src="https://cdn.jsdelivr.net/npm/hcg-file-drop@1/hcg-file-drop.js"></script>

React

StackBlitz demo

License

MIT