JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/peerjs/1.0.0/peerjs.min.js"></script>
<div id="dropper">

</div>

CSS

#dropper{
  height:400px;
  width: 400px;
  border:1px solid red;
}

JavaScript

const div = document.body.querySelector("#dropper");
["drag", "dragstart", "dragend", "dragover", "dragenter", "dragleave", "drop"].forEach((evt) => {
        div.addEventListener(evt, (e) => {
          e.preventDefault();
          e.stopPropagation();
        });
      });
      

// SENDER
const receiverID = 'qwecrt-rtfwears-erw'
const peer = new Peer(); 
const conn = peer.connect(receiverID);
peer.on('error',err => console.log(err));
conn.on('error',err => console.log(err));
conn.on('open',() => {
	console.log("open");
	conn.send("HEY");
	div.addEventListener("drop", (e)=>{
  	const file = e.dataTransfer.files[0];
		e.preventDefault();
  	e.stopPropagation();
		console.log("file");
    const blob = new Blob([file], { type: file.type });
    conn.send(file);
	});
});