Author: John Au-Yeung

To use CSS or JavaScript to prevent dragging of ghost image, we set the draggable attribute to false.

For instance, we write

<img id="myImage" src="https://picsum.photos/30/30" />

to add an img element.

Then we disable dragging on it with

document.getElementById("myImage").setAttribute("draggable", false);

We select the img element with getElementById.

And then we call setAttribute to set the draggable attribute to false to disable dragging.

To take screenshot of a div with JavaScript, we use the html2canvas library.

For instance, we write

const c = document.querySelector(".chartContainer");
const canvas = await html2canvas(c);
const t = canvas.toDataURL().replace("data:image/png;base64,", "");

to get the element with querySelector.

Then we call html2canvas with the c element to get a promise with the canvas with the element’s content inside.

Next, we call canvas.toDataURL to return the base64 URL string version of the canvas’ contents.

To get a file or blob from an object URL with JavaScript, we use fetch.

For instance, we write

const r = await fetch(url);
const blob = await r.blob();

to call fetch with the object url to get the r response from the returned promise via await.

Then we call r.blob to return a promise with the blob.

To drag drop files into standard HTML file input with JavaScript, we add an element to drop the file and a file input.

For instance, we write

<div id="dropContainer" style="border: 1px solid black; height: 100px">
  Drop Here
</div>

<input type="file" id="fileInput" />

to add a div to let user drop files and a file input.

Then we write

const dropContainer = document.querySelector("#dropContainer");
const fileInput = document.querySelector("#fileInput");

dropContainer.ondragover = dropContainer.ondragenter = (evt) => {
  evt.preventDefault();
};

dropContainer.ondrop = (evt) => {
  fileInput.files = evt.dataTransfer.files;
  const dT = new DataTransfer();
  dT.items.add(evt.dataTransfer.files[0]);
  dT.items.add(evt.dataTransfer.files[3]);
  fileInput.files = dT.files;

  evt.preventDefault();
};

to select the div and the file input.

Then we set the dragenter and dragover event handlers of the dropContainer to a function that stops the default behavior.

And we set the ondrop property to a function that gets the dropped file with evt.dataTransfer.files and set that as the value of the file input files property.

We then create a DataTransfer object and add the files into the items object with items.add.

Then we get the files from the dT object with dT.files and set that as the value of the file input files property.

Then we call preventDefault to stop the default behavior.