JSFiddle - React, Tailwind, and code Playground

HTML

<div id="drop">Drop a file here...</div>

CSS

#drop {
  font-size: 40px;
  padding: 40px;
  background: rgba(0,0,0,0.2);
}

TypeScript

function prevent(e) {
	event.preventDefault();
}

let target = document.getElementById('drop');
target.addEventListener("dragover", prevent);
target.addEventListener("dragleave", prevent);
target.addEventListener("dragend", prevent);

target.addEventListener("drop", event => {
	event.preventDefault();

	let file = event.dataTransfer.files[0];
  
  let xhr = new XMLHttpRequest();

  xhr.open("POST", "https://sm.ms/api/upload");

  let data = new FormData();

  data.append("smfile", file);

/*xhr.upload.onprogress = (e) => {
	    console.log(Math.round(100 * (e.loaded / e.total)));
	*/
  xhr.onload = () => {
    console.log("onload");
  }

  xhr.onerror = () => {
    console.error("onerror");
  };

  xhr.onloadend = () => {
    console.log("onloadend");
  };

  xhr.send(data);
});