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.

Drag & Drop an image into your project

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

<input type = "file" >

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>

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.

#image_drop_area{
   width: 400px;
   height: 225px;
   border: 1px solid black;
   background-position: center;
   background-size: cover;
   box-sizing: border-box;
}

All we did here was set up the image_drop_area 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.

const image_drop_area = document.querySelector("#image_drop_area");

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;

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';
});

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]);
});

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. 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);
}

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 do something else with it.

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