hcg-file-drop - Live Demo

Interactive demo of hcg-file-drop, a zero-dependency drag-and-drop file upload widget. Try type filtering, a removable file list, duplicate detection, and disable or reset controls. Version . hcg-file-drop - Full documentation

1. Drag and drop upload

Pass a container element and options. Drop files onto the zone or click to browse. Accepted types: image/*, .pdf, .txt, .json. Maximum 5 files. Duplicates are skipped.

Try it

View usage code

<link rel="stylesheet" href="hcg-file-drop.css">
<div id="upload-container"></div>

<script src="hcg-file-drop.js"></script>
<script>
  const uploader = hcgFileDrop(
    document.getElementById('upload-container'),
    {
      allowedTypes: ['image/*', '.pdf', '.txt', '.json'],
      maxFiles: 5,
      showFileList: true,
      onFilesChange: (files) => {
        console.log(files);
      },
    }
  );
</script>

2. onFilesChange callback

The callback receives file entries whenever the list changes. Each entry includes name, type, size, and the original file object.

Live output

Upload files to see the result here.

View usage code

hcgFileDrop(container, {
  onFilesChange: (files) => {
    if (files.length === 0) return;

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

3. reset(), disable(), and enable()

Store the returned instance and call its methods to clear files or toggle the disabled state.

Try it

View usage code

const files = uploader.getFiles();

uploader.reset();
uploader.disable();
uploader.isDisabled(); // true
uploader.enable();

uploader.destroy();