Dragover

awd

HTML

<body>
	<div class="container22">

      <div class="drag-area">
        <div id="error" class="hideit"></div>
        <div id="image-display"></div>

    <div id="submit">
        <div class="flex icon-outer1"><svg class="icon faded uploader-svg" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 91.27"><defs><style>.cls-1{fill-rule:evenodd;}</style></defs><title>picture</title><path class="cls-1" d="M87.29,16.88A11.35,11.35,0,1,1,75.94,28.23,11.35,11.35,0,0,1,87.29,16.88Zm27.33,74.39H8.26a8.27,8.27,0,0,1-5.83-2.44h0A8.24,8.24,0,0,1,0,83V8.26A8.26,8.26,0,0,1,2.42,2.42h0A8.26,8.26,0,0,1,8.26,0H114.62a8.26,8.26,0,0,1,5.83,2.43h0a8.26,8.26,0,0,1,2.42,5.84V83a8.24,8.24,0,0,1-2.42,5.83h0a8.27,8.27,0,0,1-5.83,2.44Zm-7.35-9.43L87.6,50.46a4.52,4.52,0,0,0-7.65,0L70.66,65.39,80.77,81.84H76.62l-27.57-44c-2.54-3.39-6.61-3.13-8.88,0l-27,44H9.42V9.42h104V81.84Z"/></svg><div class="ms-2 me-2" style="height: 44px; border-left: 1px solid rgb(203, 203, 203);"></div><svg class="icon faded uploader-svg i-right"  id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 98.27"><title>photos</title><path...

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;

}

img, video {
    height: auto;
    max-width: 100%;
}

body {
  background-color: #FCFCFC;
}


.mglass {
  width: 34px;
margin-left: auto;
margin-right: 10px;
opacity: 0.343;
}
.dd-t2 {
  font-size: 13px;
    color: #9e9e9e;
}

.hideit {
  display: none !important;
}

.upl-top {
  margin-bottom: 16px;
  width: 80%;
  display: inline-block;
}

.upl-top-right {
  width: 19%;
  display: inline-block;

}

.u-left {
  border-radius: 3px;
}

.up-head {
  font-size: 18px;
    color: #2b2b2b;
    font-weight: 500;
}

.container-ck {
    background-color: #ffffff;
    width: 768px;
    min-width: 37.5em;
    padding: 3.12em 1.87em;
    /* position: absolute; */
    /* transform: translateX(-50%); */
    left: 50%;
    top: 1em;
    box-shadow: 0 1.25em 3.43em rgba(0, 0, 0, 0.08);
    border-radius: 0.5em;
    margin: auto;
    margin-top: 65px;
}

.ck-btn {
    padding-top: 6px;
}

input[type="file"] {
  display: none;
}
label {
  display: block;
  position: relative;
  background-color: #025bee;
  color: #ffffff;
  font-size: 1.1em;
  text-align: center;
  width: 11em;
  padding: 1em 0;
  border-radius: 0.3em;
  margin: 0 auto 1em auto;
  cursor: pointer;
}
#image-display {
  position: relative;
  width: 98%;
  margin: 0 auto;
  display: flex;
  justify-content: space-evenly;
  gap: 21px;
  flex-wrap: wrap;
}
#image-display figure {
  width: 48%;
}
#image-display img {
  width: auto;
height: auto;
}
#image-display figcaption {
  font-size: 0.8em;
  text-align: center;
  color: #5a5861;
}

#error {
    text-align: center;
    color: #ff9191;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    background: #ffffffa8;
    z-index: 9999;
   ...

JavaScript

let uploadButton = document.getElementById("upload-button");
let chosenImage = document.getElementById("chosen-image");
let fileName = document.getElementById("file-name");
let container = document.querySelector(".drag-area");
let submit = document.getElementById("submit");
let sub2 = document.getElementById("sub2");
let error = document.getElementById("error");
let imageDisplay = document.getElementById("image-display");

const fileHandler2 = (file, name, type) => {
  if (type.split("/")[1] !== "jpeg") {
    //File Type Error
    container.classList.remove("dropped");
    submit.classList.remove("hideit");
    error.innerHTML = "<span class=\"error-m\">One or more of the selected files are invalid. Files must be .jpg/.jpeg</span>";
    error.classList.remove("hideit");
    setTimeout(function(){
         error.innerHTML="";
        error.classList.add("hideit");


       },90000);
    return false;
  }
  error.innerText = "";
  let reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onloadend = () => {
    //image and file name
    let imageContainer = document.createElement("figure");
    let img = document.createElement("img");
    img.src = reader.result;
    imageContainer.appendChild(img);
    imageContainer.innerHTML += `<div id="caption"></div>`;
    imageDisplay.appendChild(imageContainer);
  };
};

//Upload Button
uploadButton.addEventListener("change", () => {
  imageDisplay.innerHTML = "";
  container.classList.add("dropped");
submit.classList.add("hideit");
  Array.from(uploadButton.files).forEach((file) => {
    fileHandler2(file, file.name, file.type);
  });
});

container.addEventListener(
  "dragenter",
  (e) => {
    e.preventDefault();
    e.stopPropagation();
    const img = Array.from(e.dataTransfer.items).find(e => e.type.match('image/jpeg'))
    if (img){
       container.classList.add("active");
    }else{
      error.innerHTML = "<span class=\"error-m\">One or more of the selected files are invalid. Files must be...