Drag-drop-file-utils

Simple drag-drop-file helper library to use with vanilla js or any javascript framework. The library is flexible since it only set up the boiler plate for basic file drag-drop

Demo

Installation

Install it from npm (using NPM).

npm i --save drag-drop-file-utils

Usage

HTML

<div id="drop-container">
  <input type="file" id="drop-file-input" multiple />
</div>

JS

import { DragDropFile } from "drag-drop-file-utils";

const dropContainer = document.querySelector("#drop-container");

const dragEvents = {
  onDragDrop: (e) => console.log(e),
  onDragEnter: (e) => console.log(e),
  onDragOver: (e) => console.log(e),
  onDragLeave: (e) => console.log(e),
};

const dragDropFile = new DragDropFile(dropContainer, dragEvents);

window.onload = () => {
  dragDropFile.intializeDragger();
};

Options

Options	Type	Description	Example
element	HTMLElement	A valid HTMLElement should be passed to DragDropFile class, this should be the element that's going to grab the files from drop.	document.querySelector("#drop-container")
dragFn	DragEventCallbacks	Pass in the callbacks in to DragDropFile class, this callbacks will be fired according to the event types..	{ onDragDrop?: (e: DragEvent) => void; onDragEnter?: (e: DragEvent) => void; onDragOver?: (e: DragEvent) => void; onDragLeave?: (e: DragEvent) => void; }
intializeDragger	Method	This method initialize the container and adds relevant event listeners and this method should be called once the container is in the DOM	dragDropFile.intializeDragger();
getFiles	Method	Should return current files that was drop at the container	dragDropFile.getFiles();
clearFiles	Method	Should remove all the files that was captured in the drop	dragDropFile.clearFiles();
removeFile	Method	Should remove a specific file from the list of files that was dropped according to the index number	dragDropFile.removeFile(0);