DEV Community

Cover image for How to Drag & Drop Images Into Your Project with JavaScript
Miguel Nunez
Miguel Nunez

Posted on

How to Drag & Drop Images Into Your Project with JavaScript

Learning how to drag & drop an image into your project can seem like a complicated task. In fact, it can be if you’ve never done it before and it doesn’t help that there aren’t many tutorials out there that show you how to do this quickly and easily. In this tutorial, I’ll teach you how to get this done with relative ease using vanilla JavaScript.

Before we begin, it’s important to note that implementing a drag & drop feature does not require the following input field.

<input type = "file" >
Enter fullscreen mode Exit fullscreen mode

That’s only required if you want the user to click a button to upload the image. Developers often use both the button and drag & drop options together to enable users to upload images or other multi-media. In this tutorial, however, we’ll only be implementing the drag & drop feature for the sake of keeping things quick and simple.

Alright, now that we understand that we don’t need an input field, let’s begin by creating some HTML markup for our drag & drop feature.

<p>Drag and drop an image into the box</p>
<div id="image_drop_area"></div>
<p id="file_name"></p>
Enter fullscreen mode Exit fullscreen mode

The div element with an id of image_drop_area is where we’ll drag & drop our image and the p element with an id of file_name is where we’ll display the name of the image file.

Let’s move on to our CSS file.

body{
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   min-height: 100vh;
   overflow: hidden;
}
#image_drop_area{
   width: 300px;
   height: 169px;
   border: 1px solid black;
   background-position: center;
   background-size: cover;
   box-sizing: border-box;
}
Enter fullscreen mode Exit fullscreen mode

In the body element, we used flexbox properties that place the contents within it in the center of the screen. We also set up the image_drop_area div so it can properly display the image we’ll be passing to it later. Feel free to change the width and height of this div to your liking.

In our JavaScript file, let’s begin by getting access to the image_drop_area div.

const image_drop_area = document.querySelector("#image_drop_area");
Enter fullscreen mode Exit fullscreen mode

We’ll also create a global variable to store the data of the soon to be uploaded image, this way we can access it wherever we want. We’ll initialize this variable later.

var uploaded_image;
Enter fullscreen mode Exit fullscreen mode

Now that we have access to the image drop area, let’s add a ‘dragover’ event listener that handles images being dragged over it.

image_drop_area.addEventListener('dragover', (event) => {
   event.stopPropagation();
   event.preventDefault();
   event.dataTransfer.dropEffect = 'copy';
});
Enter fullscreen mode Exit fullscreen mode

The dragover event isn’t sufficient to get the job done, we also need a ‘drop’ event listener that listens and handles the image being dropped into the div.

image_drop_area.addEventListener('drop', (event) => {
   event.stopPropagation();
   event.preventDefault();
   const fileList = event.dataTransfer.files;
   document.querySelector("#file_name").textContent =    fileList[0].name;
   readImage(fileList[0]);
});
Enter fullscreen mode Exit fullscreen mode

Let’s quickly review the drop event listener. Once the file is dropped, the variable fileList stores all of the image data. We use that variable to set the textContent of our file_name id back in our HTML file. Notice the function call to readImage(fileList[0]) on the last line. We are passing the image data into this function to convert it into a data URI.

What is a data URI? Basically, we cannot do anything with the image without first converting into a data URI, for example, we cannot display it on the screen or save it in a database. Below is the readImage function that converts the image data into a data URI.

readImage = (file) => {
   const reader = new FileReader();
   reader.addEventListener('load', (event) => {
   uploaded_image = event.target.result;
   document.querySelector("#image_drop_area").style.backgroundImage     = `url(${uploaded_image})`;
   });
   reader.readAsDataURL(file);
}
Enter fullscreen mode Exit fullscreen mode

The image has now been converted into a data URI and saved in the global uploaded_image variable we created earlier. We used that variable to set the background-image of our image_drop_area div. Because our uploaded_image variable is global, we can access it wherever we want. This means we have the option of creating another function that will store it in a database or do something else with it.

Can’t get it to work? Check out my codepen

.

Discussion (0)