Drag and Drop Image Uploader with Animation Using HTML, CSS, and JavaScript

By Bytewebster - February 20, 2024

Detailed Overview of Project

There is no limit on uploading files and images; you can upload any number of files, and once a file is uploaded, you get the option to view that file so you can see that file or image.

This animated drag-and-drop image/file uploader helps you to simply grab the files and images with your mouse and drop them into a designated area on the website or webpage. You can also customise it as per your needs. We have kept its code neat and clean so that you can understand this project easily.

HTML Structure

Before we explain the HTML structure of this project, let us tell you that the highlighted codes given below are just to explain. This is not the complete code; you can download the complete source code of this drag-and-drop image/file uploader by scrolling down and clicking on the download button. So let's get started.

In the HTML Code, there is a div tag having the class "upload". This div is like a container that holds everything related to this JavaScript Drag and Drop Image Uploader.

And inside the "upload" div, there's another div with the class "upload-files." This is the main area of our animated drag-and-drop image uploader project.

<div class="upload">
    <div class="upload-files">
      <header>
        <p>
          <i class="fa fa-cloud-upload" aria-hidden="true"></i>
          <span class="up">up</span>
          <span class="load">load</span>
        </p>
      </header>
      <div class="body" id="drop">
        <i class="fa fa-file-text-o pointer-none" aria-hidden="true"></i>
        <p class="pointer-none"><b>Drag and Drop</b> Files Here <br /> or <a href="" id="triggerFile">browse</a> to
          begin the upload</p>
        <input type="file" multiple="multiple" />
      </div>
      <footer>
        <div class="divider">
          <span>
            <AR>FILES</AR>
          </span>
        </div>
        <div class="list-files">
          <!--   template   -->
        </div>
        <button class="importar">UPDATE FILES</button>
      </footer>
    </div>
  </div>

Then, inside the "upload-files" div, there's a header section. It is the top part of this file upload box. In this, we include the words "up" and "load" to make it look interesting.

Just right below the header, there's a body section. This is where you can drag and drop your files and images. There is also an option to click and browse for files. It has a hidden file input for the browsing option.

Finally, after the body section, there's a footer section; this is the bottom of this animated drag-and-drop image uploader. Now let's move on to the CSS part of this project.

Styling With CSS

We have not provided the highlighted code of CSS here because that code is too long and it is not possible to explain it completely in this project. Still, we will explain to you the basic design of this drag-and-drop image uploader.

The .upload class styles the container for this file uploader. It sets its width, height, background color, and adds a box shadow.

We have also added some animations, like the "fadeup" animation and the "faderight" animation, which make the elements gradually appear on the header of this Drag and Drop Image Uploader.

For the design of the header part, we used a gradient background and centred the text. The text also includes a cloud icon and an animated text for a more engaging look.

Then there is the body of this file uploader, where files can be dropped. We also designed this part with the various elements, and we have also added an animated icon at the centre of the body.

Lastly, the CSS code of this drag-and-drop image uploader includes some media queries for smaller screens, which adjusts the size of this uploader to fit smaller devices. Now let's move on to the javascript part.

JavaScript Explanation

From the start, the javascript code of this animated drag-and-drop image or file uploader uses the $ function to make it easy to select HTML elements. For example, there is a $("#drop") select that selects the element with the ID "drop."

For the file upload handling The handleFileSelect function is defined to handle the selection of files and images. This function generates a template for each file/images and updates the webpage to show the file list with animations.

const $ = document.querySelector.bind(document);

//APP
let App = {};
App.init = function () {
  //Init
  function handleFileSelect(evt) {
    const files = evt.target.files; // FileList object

    //files template
    let template = `${Object.keys(files).
    map(file => `<div class="file file--${file}">
     <div class="name"><span>${files[file].name}</span></div>
     <div class="progress active"></div>
     <div class="done">
	<a href="" target="_blank">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 1000 1000">
		<g><path id="path" d="M500,10C229.4,10,10,229.4,10,500c0,270.6,219.4,490,490,490c270.6,0,490-219.4,490-490C990,229.4,770.6,10,500,10z M500,967.7C241.7,967.7,32.3,758.3,32.3,500C32.3,241.7,241.7,32.3,500,32.3c258.3,0,467.7,209.4,467.7,467.7C967.7,758.3,758.3,967.7,500,967.7z M748.4,325L448,623.1L301.6,477.9c-4.4-4.3-11.4-4.3-15.8,0c-4.4,4.3-4.4,11.3,0,15.6l151.2,150c0.5,1.3,1.4,2.6,2.5,3.7c4.4,4.3,11.4,4.3,15.8,0l308.9-306.5c4.4-4.3,4.4-11.3,0-15.6C759.8,320.7,752.7,320.7,748.4,325z"</g>
		</svg>
						</a>
     </div>
    </div>`).
    join("")}`;

    $("#drop").classList.add("hidden");
    $("footer").classList.add("hasFiles");
    $(".importar").classList.add("active");
    setTimeout(() => {
      $(".list-files").innerHTML = template;
    }, 1000);

    Object.keys(files).forEach(file => {
      let load = 2000 + file * 2000; // fake load
      setTimeout(() => {
        $(`.file--${file}`).querySelector(".progress").classList.remove("active");
        $(`.file--${file}`).querySelector(".done").classList.add("anim");
      }, load);
    });
  }

  // trigger input
  $("#triggerFile").addEventListener("click", evt => {
    evt.preventDefault();
    $("input[type=file]").click();
  });

  // drop events
  $("#drop").ondragleave = evt => {
    $("#drop").classList.remove("active");
    evt.preventDefault();
  };
  $("#drop").ondragover = $("#drop").ondragenter = evt => {
    $("#drop").classList.add("active");
    evt.preventDefault();
  };
  $("#drop").ondrop = evt => {
    const droppedFiles = evt.dataTransfer.files;

    // Create a new FileList object with dropped files
    const fileList = new DataTransfer();
    for (const file of droppedFiles) {
      fileList.items.add(file);
    }

    // Set the files property of the input element with the new FileList
    $("input[type=file]").files = fileList.files;

    // Trigger the change event to handle the dropped files
    $("input[type=file]").dispatchEvent(new Event("change"));

    $("footer").classList.add("hasFiles");
    $("#drop").classList.remove("active");
    evt.preventDefault();
  };

  //upload more
  $(".importar").addEventListener("click", () => {
    $(".list-files").innerHTML = "";
    $("footer").classList.remove("hasFiles");
    $(".importar").classList.remove("active");
    setTimeout(() => {
      $("#drop").classList.remove("hidden");
    }, 500);
  });

  // input change
  $("input[type=file]").addEventListener("change", handleFileSelect);
}();

And the template for each file includes its name, a progress bar, and a "View" button. This button links to an empty page and also gives a cool animation when clicked.

For the drag-and-drop handling, The javascript code adds event listeners for drag-and-drop functionality. When files are dragged over the body area, they become active. and When files are dropped, the dropped files are handled, and the file list is updated accordingly.