From 1fa8fd5f912d9095a9906646d11c75d61d8d49b7 Mon Sep 17 00:00:00 2001
From: Neeraj <neerajantil.antil26@gmail.com>
Date: Tue, 23 Jan 2024 19:33:10 +0530
Subject: [PATCH] Added Drag & Drop Feature and Redesigned the Upload Section
 (#221)

---
 assets/main.css  | 289 +++++++++++++++++++++++++++++++++++++----------
 assets/main.html |  27 +++--
 assets/main.js   | 175 +++++++++++++++++++++-------
 3 files changed, 378 insertions(+), 113 deletions(-)

diff --git a/assets/main.css b/assets/main.css
index 1aa94cb..26c5c70 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -489,107 +489,278 @@ img {
     object-fit: contain;
 }
 
-/* Upload section */
+/* ----------------- Upload section ------------------- */
 
-.upload-edible-section {
+.container-upload {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
     margin-bottom: 100px !important;
 }
 
-.upload-edible-btn {
+.uploadzone {
     display: flex;
     align-items: center;
     justify-content: center;
+    padding-top: 0.1px;
+    padding-bottom: 0.1em;
 }
 
-.upload-edible-btn h5 {
-    margin-top: 0rem !important;
+.wrapper {
+    width: 498px;
+    background-color: #fff;
+    border-radius: 16px;
+    backdrop-filter: blur(8.5px);
+    -webkit-backdrop-filter: blur(8.5px);
+    border: 3px solid var(--primary);
+    padding: 30px;
 }
 
-.upload-btn {
+.wrapper .dragDrop {
+    height: 210px;
     display: flex;
-    flex-direction: column;
+    cursor: pointer;
     align-items: center;
     justify-content: center;
-    position: relative;
-    padding-left: 5px;
-    padding-right: 5px;
-    width: 20vw !important;
-    height: auto !important;
+    flex-direction: column;
+    border-radius: 5px;
+    border: 0.23rem dashed #000;
 }
 
-.upload-btn:hover {
-    background-color: var(--block);
-    transform: scale(1);
+form :where(i, p) {
+    color: #000;
 }
 
-.upload-btn img {
-    margin-top: 1rem;
-    width: 120px !important;
-    height: 120px !important;
-    object-fit: contain;
+form i {
+    font-size: 50px;
+    color: var(--block);
 }
 
-#choose-edible {
-    background-color: var(--c);
-    font-size: small;
-    color: white;
-    padding: 0.5rem;
-    font-family: sans-serif;
-    border-radius: 0.3rem;
-    margin-top: 1rem;
-    margin-bottom: 0.25rem;
+form p {
+    margin-top: 15px;
+    font-size: 18px;
+    color: #000;
 }
 
-#choose-edible:hover {
-    transform: scale(1.1);
-    transition: all 0.3s ease;
+/* Animation - Optional */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
 }
 
-#choose-uploaded-edible {
-    background-color: #4CAF50;
-    font-size: small;
-    color: white;
-    padding: 0.5rem;
-    padding-left: 1rem;
-    padding-right: 1rem;
+.styled-url-input,
+.submit-button {
+    animation: fadeIn 1s ease;
+}
+
+section .row-upload {
+    margin-bottom: 10px;
+    background: #e9f0ff;
+    list-style: none;
+    padding: 15px 20px;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+section .row-upload i {
+    color: #000;
+    font-size: 30px;
+}
+
+section .details-upload span {
+    font-size: 14px;
+}
+
+.content-upload .progress-bar .progress {
+    height: 100%;
+    width: 0%;
+    background: #000;
+    border-radius: inherit;
+}
+
+.name{
+    font-size: 14px;
+    font-weight: 600;
+    color: #000;
+}
+
+.uploaded-area {
+    max-height: 232px;
+    overflow-y: scroll;
+}
+
+.uploaded-area.onprogress {
+    max-height: 150px;
+}
+
+.uploaded-area::-webkit-scrollbar {
+    display:none;
+}
+
+.uploaded-area .row-upload .content-upload {
+    display: flex;
+    align-items: center;
+}
+
+.uploaded-area .row-upload .details-upload {
+    display: flex;
+    margin-left: 15px;
+    flex-direction: column;
+}
+
+.uploaded-area .row-upload .details-upload .size {
+    color: #404040;
+    font-size: 12px;
+}
+
+.uploaded-area i.fa-check {
+    font-size: 16px;
+}
+
+.uploaded-area .file-preview{
+    width: 50px;
+    height: 50px;
+    margin-right: 15px;
+    background-size: cover;
+    background-position: center;
+}
+
+#upload-btn{
+    display: none;
     border: none;
-    font-family: sans-serif;
-    border-radius: 0.3rem;
+    margin-top: 1rem;
+    color: white;
+    padding: .5em 1.5em;
+    text-align: center;
+    text-decoration: none;
+    font-size: 18px;
+    cursor:none;
+    background-color: var(--block);
+    border-radius: 0.5em;
+    scale: 1;
+    transition: scale .3s ease-in-out;
 }
 
-#choose-uploaded-edible:hover {
-    background-color: #3e8e41;
-    transform: scale(1.1);
-    transition: all 0.3s ease;
+#upload-btn:hover{
+    scale: 1.05;
 }
 
-@media (max-width: 768px) {
-    .upload-btn {
-        width: 30vw !important;
+#upload-btn:active{
+    scale: 0.95;
+}
+
+#snackbar {
+    visibility: hidden;
+    min-width: 250px;
+    background-color: rgba(255, 255, 255, 0.5);
+    border-radius: 16px;
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(8.5px);
+    -webkit-backdrop-filter: blur(8.5px);
+    border: 1px solid rgba(97, 97, 97, 0.11);
+    color: #000;
+    text-align: center;
+    padding: 16px;
+    position: fixed;
+    left: 50%;
+    transform: translate(-50%, 0);
+    z-index: 1;
+    bottom: 30px;
+    font-size: 17px;
+}
+
+#snackbar.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, fadeout 0.5s 2.5s;
+}
+
+
+/* Animations for Toast Message */
+@-webkit-keyframes fadein {
+    from {
+        bottom: 0;
+        opacity: 0;
+    }
+
+    to {
+        bottom: 30px;
+        opacity: 1;
     }
 }
 
-@media screen and (max-width: 415px) {
-    .upload-btn {
-        width: 40vw !important;
+@keyframes fadein {
+    from {
+        bottom: 0;
+        opacity: 0;
+    }
+
+    to {
+        bottom: 30px;
+        opacity: 1;
     }
 }
 
-@media screen and (max-width: 375px) {
-    .upload-btn {
-        width: 50vw !important;
+@-webkit-keyframes fadeout {
+    from {
+        bottom: 30px;
+        opacity: 1;
+    }
+
+    to {
+        bottom: 0;
+        opacity: 0;
     }
 }
 
-@media screen and (max-width: 320px) {
-    .upload-btn {
-        width: 60vw !important;
+@keyframes fadeout {
+    from {
+        bottom: 30px;
+        opacity: 1;
+    }
+
+    to {
+        bottom: 0;
+        opacity: 0;
     }
 }
 
-@media screen and (max-width: 280px) {
+/* Responsive Upload Edible Section */
+
+@media (min-width: 320px) and (max-width: 450px) {
     .upload-btn {
-        width: 70vw !important;
+        width: 60vw !important;
+    }
+    .wrapper{
+        width: 90%;
+        min-width: 90%;
+    }
+    .container-upload h5{
+        margin-bottom: 3rem;
+    }
+    .container-upload h1{
+        font-size: 1.5rem;
+    }
+    .container-upload h3{
+        font-size: .7rem;
+    }
+    .name{
+        font-size: 14px;
+    }
+    .uploaded-area .row-upload .details-upload{
+        margin: 0;
+        padding: 0 10px;
+    }
+    .row-upload i{
+        display:none;
     }
 }
 
diff --git a/assets/main.html b/assets/main.html
index 247fdaf..915c970 100644
--- a/assets/main.html
+++ b/assets/main.html
@@ -410,21 +410,24 @@ <h1>OR</h1>
             </div>
 
             <!----- Upload Edible ----->
-            
-            <div class="upload-edible-section">
-                <div class="screen-page">
-                    <h1>Didn't find your favourite Edible ?</h1>
-                    <h3>Upload your Edible to continue....</h3>
-                    <div class="upload-edible-btn">
-                        <div class="choose-btn upload-btn">
-                            <img src="images/upload.png" alt="Uploaded Edible" id="file-preview">
-                            <input type="file" accept=".jpg, .jpeg, .png" id="file-upload" hidden> 
-                            <label for="file-upload" id="choose-edible">Choose Your Own Edible</label>
-                            <button id="choose-uploaded-edible" style="display: none;">Continue ▶️</button>
+            <div class="container-upload">
+                <h1>Didn't find your favourite Edible ?</h1>
+                <h3>Upload your Edible to continue....</h3>
+                <div class="uploadzone">
+                    <div class="wrapper" id="drag-warper">
+                        <div class="drag-area" id="drag-area">
+                            <form class="dragDrop" action="#" id="drag-form">
+                                <input class="file-input" type="file" id="file-input" name="file" hidden />
+                                <i class="fas fa-cloud-upload-alt" id="drag-cloud"></i>
+                                <p id="drag_text">Click Or Drag and Drop File to Upload</p>
+                            </form>
                         </div>
+                        <section class="uploaded-area"></section>
                     </div>
-                    <h5>(Make sure that your image has a transparent background)</h5>
                 </div>
+                <div id="snackbar"></div>
+                <button id="upload-btn">Play!</button>
+                <h5>(Make sure that your image has a transparent background)</h5>
             </div>
         </div>
     </div>
diff --git a/assets/main.js b/assets/main.js
index 7d392ac..289d138 100644
--- a/assets/main.js
+++ b/assets/main.js
@@ -206,53 +206,144 @@ start_btn.addEventListener("click", function () {
   head.style.display = "flex";
 });
 
-// --------------- uploading image ----------------
-const input = document.getElementById('file-upload');
-const previewPhoto = () => {
-    const file = input.files;
-    if (file) {
-        const fileReader = new FileReader();
-        const preview = document.getElementById('file-preview');
-        fileReader.onload = event => {
-            preview.setAttribute('src', event.target.result);
-            const play_on_upload_btn = document.querySelector('.upload-btn').querySelector('button');
-            play_on_upload_btn.style.display = 'block';
-        }
-        fileReader.readAsDataURL(file[0]);
+// --------------- Uploading Image Start ----------------
+
+const form = document.querySelector("form");
+const dropArea = document.querySelector(".drag-area");
+const fileInput = document.querySelector(".file-input");
+const progressArea = document.querySelector(".progress-area");
+const uploadedArea = document.querySelector(".uploaded-area");
+
+const allowed_EXT = /\.(jpg|jpeg|png)$/i;
+
+const files_name_upload = [];
+
+const dragForm = document.querySelector("#drag-form");
+const dragText = document.querySelector("#drag_text");
+const dragCloud = document.querySelector("#drag-cloud");
+const dragInput = document.querySelector("#file-input");
+const dragZone = document.querySelector("#drag-area");
+const dragWarper = document.querySelector("#drag-warper");
+
+// Displays the Warning message
+function showToast(s, c) {
+  var x = document.querySelector("#snackbar");
+  var text = document.createTextNode(s);
+  x.style.backgroundColor = c;
+  x.textContent = "";
+  x.appendChild(text);
+  x.className = "show";
+  setTimeout(function () {
+    x.className = x.className.replace("show", "");
+  }, 3000);
+}
+
+// Form click event
+form.addEventListener("click", () => {
+  fileInput.click();
+});
+
+fileInput.onchange = ({ target }) => {
+  let file = target.files;
+  if (file.length === 1) {
+    if (!allowed_EXT.exec(file[0].name)) {
+      showToast("Only Image files are allowed", "#fff");
+    } else {
+      if (!files_name_upload.includes(file[0].name)) {
+        files_name_upload.push(file[0].name);
+        uploadFile(file[0].name);
+      }
     }
+  } else {
+    showToast("Multiple file uploading is forbidden", "#fff");
+  }
+};
+
+dropArea.addEventListener("dragover", (event) => {
+  event.preventDefault();
+  dragText.textContent = "Release to Upload File";
+  dragForm.style.borderColor = "#000";
+  dragText.style.fontSize = "18px";
+  dragText.style.color = "#000";
+});
+
+dropArea.addEventListener("dragleave", () => {
+  dragText.textContent = "Click Or Drag and Drop File to Upload";
+  dragForm.style.borderColor = "#000";
+  dragText.style.fontSize = "18px";
+  dragText.style.color = "#000";
+});
+
+//If user drop File on DropArea
+dropArea.addEventListener("drop", (event) => {
+  event.preventDefault();
+  var all_drop_files = event.dataTransfer.files;
+
+  if (all_drop_files.length === 1) {
+    if (!allowed_EXT.exec(all_drop_files[0].name)) {
+      showToast("Only Image files are allowed", "#fff");
+    } else {
+      if (!files_name_upload.includes(all_drop_files[0].name)) {
+        files_name_upload.push(all_drop_files[0].name);
+        uploadFile(all_drop_files[0]);
+        fileInput.files = all_drop_files;
+        fileInput.dispatchEvent(new Event("change"));
+      }
+    }
+  } else {
+    showToast("Multiple file uploading is forbidden", "#fff");
+  }
+  dragText.textContent = "Click Or Drag and Drop File to Upload";
+  dragForm.style.borderColor = "#000";
+  dragText.style.fontSize = "18px";
+  dragText.style.color = "#000";
+});
+
+function uploadFile(file) {
+  const fileName = typeof file === "string"?file:file.name;
+  let uploadArea = document.querySelector(".uploaded-area");
+  uploadArea.style.display = "block";
+  uploadArea.innerHTML = `
+  <li class="row-upload">
+    <div class="content-upload upload">
+        <img src="images/upload.png" class="file-preview" alt="preview">
+      <div class="details-upload">
+        <p class="name">${fileName.slice(0,fileName.length>=21?21:fileName.length)+(fileName.length>=21?'...':'')} • Uploaded</p>
+      </div>
+    </div>
+    <i class="fas fa-check"></i>
+  </li>`;
 }
-input.addEventListener('change', previewPhoto);
-// --------------- uploading image ----------------
-
-choose_btns.forEach((btn) => {
-  if(btn.classList.contains("upload-btn")) {
-    btn.querySelector("button").addEventListener("click", () => {
-      const img = btn.querySelector("img");
-      const src = img.getAttribute('src');
-      const alt = img.getAttribute('alt');
-
-      selected_edible = { src, alt };
-      screens[1].classList.add("up1");
-      game_container.style.height = "100vh";
-      startGame();
-      displayChange();
-      choose_edible.play();
-    });
-    return;
+
+const previewPhoto = () => {
+  const file = fileInput.files;
+  if (file) {
+    const fileReader = new FileReader();
+    const preview = document.querySelector(".file-preview");
+    fileReader.onload = (event) => {
+      preview.setAttribute("src", event.target.result);
+      const play_on_upload_btn = document.querySelector("#upload-btn");
+      play_on_upload_btn.style.display = "block";
+    };
+    fileReader.readAsDataURL(file[0]);
   }
-  btn.addEventListener("click", () => {
-    const img = btn.querySelector("img");
-    const src = img.getAttribute("src");
-    const alt = img.getAttribute("alt");
-    selected_edible = { src, alt };
-    screens[1].classList.add("up1");
-    game_container.style.height = "100vh";
-    startGame();
-    displayChange();
-    choose_edible.play();
-  });
+};
+fileInput.addEventListener("change", previewPhoto);
+
+document.querySelector("#upload-btn").addEventListener("click", () => {
+  const img = document.querySelector(".file-preview");
+  const src = img.getAttribute("src");
+  const alt = img.getAttribute("alt");
+  selected_edible = { src, alt };
+  screens[1].classList.add("up1");
+  game_container.style.height = "100vh";
+  startGame();
+  displayChange();
+  choose_edible.play();
 });
 
+// --------------- Uploading Image End ----------------
+
 function chooseGameplayTime() {
   document.getElementById("time").style.display = "none";
   document.getElementById("gameplayTime").style.display = "flex";