Skip to content

Drag and Drop File Upload

Drag and drop upload can be done with Fs.writeFile:

ts
import { Fs } from "@vaguevoid/tools";

// create a div element to drop files into
const div = document.appendChild(document.createElement("div"));
div.style.border = "1px solid black";
div.style.background = "rebeccapurple";
div.style.width = "20vw";
div.style.height = "20vh";

// preventDefault on dragOver, see: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
div.addEventListener("dragover", (e) => {
  e.preventDefault();
});

// write files to the project on drop
div.addEventListener("drop", async (e) => {
  e.preventDefault();

  const files = e.dataTransfer?.files;
  await Fs.writeFile("assets/myfolder", files);
});