How to build custom drag and drop builder to upload image

This tutorial we are going to implement custom drag and drop builder for image upload using JS. We will use bootstrap for designing and JS library to control drag and drop builder. So let’s have begin with create HTML.

Create index.html file.

<!DOCTYPE html>
<html lang="en">
      <link rel="stylesheet" href="" crossorigin="anonymous">
      <div class="container">
         <div class="row">
            <div class="col-md-12">
               <div class="panel panel-card ">
                  <div class="panel-body">
                     <div class="form-group mb-10">
                        <div class="drag-area">
                           <div class="icon">
                              <svg xmlns="" width="55" height="55" fill="currentColor" class="bi bi-upload" viewBox="0 0 16 16">
                                 <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"></path>
                                 <path d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708l3-3z"></path>
                           <header>Drag & Drop to Upload File</header>
                           <button class="btn-theme">Browse File</button>
                           <input type="file" hidden accept=".jpg, .jpeg, .png" name="file_logo" id="file_logo">
                        <p class="logo_error" style="display:none;">Your logo dimensions are not valid. The logo should be 400px width by 200px height.</p>
                        <p class="help">Dimensions must be 400px width by 200px height <br>(JPEG or PNG format) <br></p>
               <!-- End .panel -->  
            <!--end .col-->
         <!--end .row-->
      <script src="jquery-main.js"></script>

We have ready with form now, we will add some styles in drag and drop builder to looks awesome. so, let’s create the style.css in working directory and paste this code.

Create style.css

	.drag-area {
		border: 2px dashed #2a232357;
		width: 100%;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		text-align: center;
	.drag-area .icon {
		font-size: 70px;
	.drag-area header {
		font-weight: 500;
	.drag-area span {
		font-size: 25px;
		font-weight: 500;
		margin: 10px 0 15px 0;
	.btn-theme {
		background-color: #D61F8B;
		border: 1px solid #D61F8B;
		border-radius: 5px;
		color: #fff;
		display: inline-block;
		font-size: 15px;
		padding: 8px 35px 8px;
		text-align: center;
How to build custom drag and drop builder to upload image

Now, We are ready with image upload drag and drop builder. Let’s create JS file and add this on builder to make it working. create another JS file dragdrop.js and include in index.html file.

Create dragdrop.js file

const dropArea = document.querySelector(".drag-area"),
         dragText = dropArea.querySelector("header"),
         button = dropArea.querySelector("button"),
         input = dropArea.querySelector("input");
         let file; //this is a global variable and we'll use it inside multiple functions

         dropArea.onclick = ()=>{; //if user click on the button then the input also clicked

         input.addEventListener("change", function(){
         //getting user select file and [0] this means if user select multiple files then we'll select only the first one
         file = this.files[0];
         showFileLogo(); //calling function

         //If user Drag File Over DropArea
         dropArea.addEventListener("dragover", (event)=>{
         event.preventDefault(); //preventing from default behaviour
         dragText.textContent = "Release to Upload File";

         //If user leave dragged File from DropArea
         dropArea.addEventListener("dragleave", ()=>{
         dragText.textContent = "Drag & Drop to Upload File";

         //If user drop File on DropArea
         dropArea.addEventListener("drop", (event)=>{
         event.preventDefault(); //preventing from default behaviour
         //getting user select file and [0] this means if user select multiple files then we'll select only the first one
         file = event.dataTransfer.files[0];
         showFileLogo(); //calling function

         function showFileLogo(){
         let fileType = file.type; //getting selected file type
         let validExtensions = ["image/jpeg", "image/jpg", "image/png"]; //adding some valid image extensions in array
         if(validExtensions.includes(fileType)){ //if user selected file is an image file
            let fileReader = new FileReader(); //creating new FileReader object
            fileReader.onload = ()=>{
               let fileURL = fileReader.result; //passing user file source in fileURL variable
               let imgTag = `<img src="${fileURL}" alt="">`; //creating an img tag and passing user selected file source inside src attribute
               var i = new Image();

               i.onload = function(){
                  var width= i.width;
                  var height= i.height;
                  if(width==400 && height==200){
                     dropArea.innerHTML = imgTag; //adding that created img tag inside dropArea container

               i.src = fileURL; 

            alert("This is not an Image File!");
            dragText.textContent = "Drag & Drop to Upload File";
Read Also: PHP file upload in database with Error Handling
Read Also: How to compress image size while uploading in PHP

When you can upload image on drag and drop div it will call file browse button.

We have applied some restriction for file upload :

  • Accept PNG and JPEG only
  • Image size should be 400 *200 change it as per your needs.
  • Image view on drag and drop div using fileReader.
  • alert message when anything goes wrong.

Leave a Reply