Sometimes I debate with my team that most of the things can be achieved by Vanilla JS without using an npm package. That's why I thought about writing a series on this. In this article, we will talk about HTML Drag and Drop API and try to create a Drag and Drop for images that you can then use in your project without using any package or library. So let's get started. 🏃🏾‍♂️

Creating the Drop Zone 🧰

In this example, We will be dragging the text, but you can drop anything on the drop zone.

<div class="outer-body">
    
  <!--   Draggable h1 for test 🧐  -->
  <h1 draggable="true">Simple Drag and Drop 📦 </h1>

  <!--   Drop Area 📥 -->
  <div class="the-box" 
       id="magicBox" 
       ondragover="dragging(event)" 
       ondragleave="dragLeft()">

  </div>
</div>

Drag API has a couple of Events which you can use to know each state of drag. In our case, to create an animation when the object is dragged on the drag zone, we will use two events ondragover  and ondragleave . Below is the list of all of them in case you want to create something more complex. For more details, check this MDN Doc.

Now let us write code to change the color of the border if one drags on the drag zone.

const magicBox = document.getElementById("magicBox");

// Change color of the box if something being dragged 🖍
const dragging = (e) => {
  e.preventDefault();
  magicBox.style = "border-color: rgba(164, 37, 228)";
};

// Back to initial stage when dragging ends 🏃🏾‍♂️
const dragLeft = () => {
  magicBox.style = "border-color: #c6c6c6";
};

Handling Drop Event 📥

Now it's time handle drop on the drop zone. Let's start with simple steps first

The event that we will use to handle drop is of course ondrop event. In HTML add the following code.

   <!--   Drop Area 📥 -->
  <div class="the-box" 
       id="magicBox" 
       ondrop="onDrop(event)" 
       ondragover="dragging(event)" 
       ondragleave="dragLeft()">

Make sure you pass the event in the callback, as we will be using that to prevent default browser actions using e.preventDefault(), or else you may be redirected to a new page on document drop zone.

// Alert when something is dropped 🔔
const onDrop = (e) => {
  e.preventDefault();
  alert("Hello There 👋");
  magicBox.style = "border-color: #c6c6c6";
};

Preview and Upload Dropped files

So finally it's time to upload the content to your server. This part is actually more about FileList Object because that's what Drop API returns when a file is dropped on the Drop Zone.

Let's modify our onDrop Function a Lil bit. In the event you will have access to dataTransfer object which, will have a list of items dropped on the drop zone. If it's a file, it will be in the files object and if it's text you can use ev.dataTransfer.getData("text/plain") to get it's value. To know what else you can do with dataTransfer object check this MDN Doc.

// Handle File drop on Drop Zone 📥
const onDrop = (e) => {
  e.preventDefault();

  const { files } = e.dataTransfer;
  previewImage(files[0]);

  magicBox.style = "border-color: #c6c6c6";
};

// Appending Image to the Drop area 👩‍👦
const previewImage = (file) => {
  const img = document.createElement("img");
  img.src = URL.createObjectURL(file);
  magicBox.appendChild(img);
};

In previewImage function used URL.createObjectURL() to covert file object to URL that then can be passed into image's src. To upload, you can simply pass the object and upload it to your server.

// Create payload and upload to server 🚀
const upload = (files) => {
  const payload = { image: files };
  // Upload to your API 📤
};

CodePen

See the Pen mdEZmEN by Sarthak (@sarthology) on CodePen.

Conclusion

Think about it, in less than 30 lines of code, we created our on Drag and Drop box. FYI, I have used the same code to create drag and drop image upload feature for Dev.to. That's it, folks.
I hope you enjoyed this article and have learned something new. I will be writing more in this series on how you can achieve more by writing less code in just Vanilla JavaScript.

If you liked this, don't forget to subscribe. If you have any better way to do this add your comment in the comment section below. Bye 👋