edge cases for uploading and dropping images

ronak232 · ronak232 · commit cd2626121e61 · 2025-03-01T18:53:17.000+05:30
diff --git a/drag-and-drop-vanilla-js/index.html b/drag-and-drop-vanilla-js/index.html
@@ -8,10 +8,15 @@
   </head>
   <body>
     <div>
-      <h1>Drag and Drop</h1>
+      <h1 style="text-align: center;">Drag and Drop</h1>
       <div class="drag-upload">
         <div class="drag-area green" id="img-show">
-          <input type="file" id="file-upload" accept="image/*" multiple />
+          <label for="file-upload" id="upload-label"
+            ><span>Drag &amp; Drop Images</span>
+            <span>Or</span>
+            <span>Click for browse Images...🖼️</span>
+            <input type="file" id="file-upload" accept="image/*" multiple />
+          </label>
         </div>
       </div>
       <div class="container">
diff --git a/drag-and-drop-vanilla-js/src/main.js b/drag-and-drop-vanilla-js/src/main.js
@@ -2,12 +2,20 @@ const draggableArea = document.querySelectorAll(".drag-area");
 const imageShow = document.querySelector("#img-show");
 const dragUploadFile = document.getElementById("file-upload");
 const drag_img = document.querySelector(".drag-img");
+const label_Onupload = document.getElementById("upload-label");
 
 // drag and drap events
 let isDragged; // store the dragged elements
 
 dragUploadFile.addEventListener("change", (e) => {
-  displayMultipleImages(e.target.files);
+  if (e.target.files.length > 3) {
+    label_Onupload.style.display = "flex";
+    alert("upload not more than 3 images...");
+  } else if (e.target.files.length <= 3) {
+    displayMultipleImages(e.target.files);
+    label_Onupload.style.display = "none";
+    return;
+  }
 });
 
 //function to handle drag start
@@ -36,10 +44,16 @@ function onDragLeave(e) {
 function onDragDrop(e) {
   e.preventDefault();
   e.target.classList.remove("currentBox");
-  const dropTarget = e.target.closest('.drag-area');
+  const dropTarget = e.target.closest(".drag-area");
   if (!dropTarget) return;
-  
-  if (isDragged && isDragged.tagName === 'IMG') {
+
+  for (let file of e.dataTransfer.files) {
+    if (file.type === "image/*") {
+      displayMultipleImages(file);
+    }
+  }
+
+  if (isDragged) {
     if (dropTarget !== isDragged.parentElement) {
       dropTarget.appendChild(isDragged);
     }
@@ -51,28 +65,43 @@ function onDragEnter(e) {
 }
 
 function onDragEnd(e) {
+  let checkLength = dropZonEmptyCheck(imageShow);
+  if (checkLength <= 1) {
+    label_Onupload.style.display = "none";
+  } else {
+    label_Onupload.style.display = "flex";
+  }
+
   setTimeout(() => {
     e.target.classList.add("hoverLeave");
   }, 100);
 }
 
+function dropZonEmptyCheck(image) {
+  const imageCount = image.querySelectorAll("img").length;
+  if (imageCount) {
+    return true;
+  }
+}
+
 // handling multiple files
 function displayMultipleImages(files) {
   for (let file of files) {
-    if (!file && !file.type("image/*")) {
+    if (!file && !file.type("image/*") && files.length > 3) {
       return false;
     }
   }
 
+  //
   for (let file of files) {
     let reader = new FileReader();
     reader.onload = () => {
       let image = new Image();
       image.src = reader.result;
       image.style.display = "block";
       image.className = "drag-img";
-      image.setAttribute('draggable', 'true');
-      image.addEventListener('dragstart', function(e) {
+      image.setAttribute("draggable", "true");
+      image.addEventListener("dragstart", function (e) {
         isDragged = e.target;
       });
       imageShow.appendChild(image);
diff --git a/drag-and-drop-vanilla-js/src/style.css b/drag-and-drop-vanilla-js/src/style.css
@@ -18,13 +18,14 @@ body {
 
 .drag-area {
   width: 200px;
+  height: max-content;
   min-height: 250px;
-  max-height: max-content;
   padding: 10px;
   border: 1px solid rgba(181, 170, 170, 0.338);
   border-radius: 10px;
   box-shadow: 5px 0px 18px rgba(64, 64, 64, 0.573);
   flex-wrap: wrap;
+  display: flex;
 }
 
 .drag-img {
@@ -34,19 +35,35 @@ body {
   min-width: 50px;
 }
 
-.drag-upload{
+.drag-upload {
   display: flex;
   align-items: center;
   margin-bottom: 10px;
   justify-content: center;
 }
 
 .green {
-  background-color: rgba(16, 255, 44, 0.873);
+  background-color: rgba(255, 255, 255, 0.911);
+  position: relative;
+  min-width: 250px;
+  font-size: 18px;
 }
 
 .green input[type="file"] {
   width: 100%;
+  visibility: hidden;
+}
+
+.green label {
+  min-height: inherit;
+  display: flex;
+  position: absolute;
+  max-width: 240px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  border: dashed;
 }
 
 .orange {
