From 240c6aa19b75541cdd7e891123a9bb215345445c Mon Sep 17 00:00:00 2001
From: Booteille <booteille@protonmail.com>
Date: Fri, 27 Dec 2024 10:51:51 +0100
Subject: [PATCH] Add drag and drop functionnality

---
 themes/default/public/js/upload.js | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/themes/default/public/js/upload.js b/themes/default/public/js/upload.js
index a782521..e405b17 100644
--- a/themes/default/public/js/upload.js
+++ b/themes/default/public/js/upload.js
@@ -395,10 +395,10 @@ document.addEventListener("DOMContentLoaded", () => {
   let providedFiles = [];
   let totalSize = 0;
 
-  fileInput.onchange = () => {
+  const handleFilesPick = (files) => {
     const providedFilesDOM = document.getElementById("provided-files");
 
-    Array.from(fileInput.files).forEach((file) => {
+    Array.from(files).forEach((file) => {
       if (!providedFiles.find((f) => file.name === f.name)) {
         providedFiles.push(file);
 
@@ -457,6 +457,8 @@ document.addEventListener("DOMContentLoaded", () => {
     }
   };
 
+  fileInput.onchange = () => handleFilesPick(fileInput.files);
+
   document.getElementById("zip-multiple").onchange = () => {
     document.getElementById("zip-name").classList.toggle("is-invisible");
   };
@@ -510,6 +512,20 @@ document.addEventListener("DOMContentLoaded", () => {
     showFullUploadZone();
   };
 
+  document.getElementById("file-js-upload").ondragover = (event) => {
+    event.stopPropagation();
+    event.preventDefault();
+
+    event.dataTransfer.dropEffect = "copy";
+  };
+
+  document.querySelector("#file-js-upload").ondrop = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    handleFilesPick(event.dataTransfer.files);
+  };
+
   if (maxSize) {
     const maxSizeDOM = document.createElement("span");
     maxSizeDOM.innerText = i18n.maxSize.replace("XXX", filesize(maxSize));