Merge pull request #187 from BenediktMKuehne/drag-n-drop

Drag'n'drop
e-m-b-a · Dec 21, 2023 · 68f968b · 68f968b
2 parents a15686f + 41ccf38
commit 68f968b
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 30 deletions.
diff --git a/dev-tools/check_project.sh b/dev-tools/check_project.sh
@@ -184,7 +184,7 @@ banditer() {
     exit 1
   fi
 
-  mapfile -t PY_SCRIPTS < <(find . -type d -name migrations -prune -false -o -iname "*.py" -not -path "./.venv/*")
+  mapfile -t PY_SCRIPTS < <(find . -type d -name migrations -prune -false -o -iname "*.py" -not -path "./.venv/*" -not -path "./emba/*")
 
   for PY_SCRIPT in "${PY_SCRIPTS[@]}"; do
     echo -e "\\n""${GREEN}""Run bandit on ${PY_SCRIPT}:""${NC}""\\n"
@@ -244,7 +244,7 @@ dockerchecker(){
   mapfile -t DOCKER_COMPS < <(find . -maxdepth 1 -type d -name migrations -prune -false -o -iname "docker-compose*.yml")
   for DOCKER_COMP in "${DOCKER_COMPS[@]}"; do
     echo -e "\\n""${GREEN}""Run docker check on ${DOCKER_COMP}:""${NC}""\\n"
-    if docker-compose -f "${DOCKER_COMP}" config 1>/dev/null || [[ $? -ne 1 ]]; then # TODO check
+    if docker-compose -f "${DOCKER_COMP}" config 1>/dev/null || [[ $? -ne 1 ]]; then
       echo -e "${GREEN}""${BOLD}""==> SUCCESS""${NC}""\\n"
     else
       echo -e "\\n""${ORANGE}${BOLD}==> FIX ERRORS""${NC}""\\n"

diff --git a/embark/static/content/css/globalStyle.css b/embark/static/content/css/globalStyle.css
@@ -36,8 +36,6 @@ textarea:focus,
 .form-control:focus,
 .btn:focus {
     outline: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
     box-shadow: none;
 }
 
@@ -137,6 +135,7 @@ button[type="delete"]:hover {
     background-color: #fff;
     color: #000;
     padding-top: 12px;
+    border-radius: 10px;
 }
 
 .innerBlock {

diff --git a/embark/static/content/css/uploader.css b/embark/static/content/css/uploader.css
@@ -202,4 +202,21 @@ input:checked+.slider:before {
 
 .alert {
     margin: 30px;
-}
+}
+
+.upload_dropZone {
+    color: #0f3c4b;
+    background-color: var(--colorPrimaryPale, #c8dadf);
+    outline: 2px dashed var(--colorPrimaryHalf, #c1ddef);
+    outline-offset: -12px;
+    transition:
+      outline-offset 0.2s ease-out,
+      outline-color 0.3s ease-in-out,
+      background-color 0.2s ease-out;
+}
+
+.upload_dropZone.highlight {
+    outline-offset: -4px;
+    outline-color: var(--colorPrimaryNormal, #0576bd);
+    background-color: var(--colorPrimaryEighth, #c8dadf);
+}
diff --git a/embark/static/scripts/fileUpload.js b/embark/static/scripts/fileUpload.js
@@ -1,13 +1,5 @@
 // jshint unused:false
 // ^ this should only be added AFTER successful check (disables warning for global functions)
-/**
- * The following event calls prevent default to turn off the browsers default drag and drop handler
- * @param {*} ev Event
- */
-function dragOverHandler(ev) {
-  "use strict";
-  ev.preventDefault();
-}
 
 function getCookie(name) {
     "use strict";
@@ -47,7 +39,7 @@ $(window).bind("load", function() {
  * Makes Ajax call and save files locally
  * @param {*} formData Information of the uploaded file or Files
  */
- async function postFiles(formData) {
+async function postFiles(formData) {
   "use strict";
   try {
     //formData.append('file', fileData);
@@ -97,23 +89,69 @@ $(window).bind("load", function() {
       }
     });
   } catch (error) {
-      console.log(error.message);
+    console.log(error.message);
   }
 }
 
 /**
  * Checks for any Multiple uploads and the Passes to save
  */
 function saveFiles() {
-    "use strict";
-    var progressBar = document.getElementById("progress-wrapper");
-    progressBar.style.display = "block";
-    var fileData = document.getElementById('file-input').files;
-    var formData = new FormData();
-    for (let index = 0; index < fileData.length; index++) {
-      fileData[index].inputFileName = fileData[index].name;
-      formData.append('file', fileData[index]);
-    }
+  "use strict";
+  var progressBar = document.getElementById("progress-wrapper");
+  progressBar.style.display = "block";
+  var fileData = document.getElementById('file-input').files;
+  var formData = new FormData();
+  for (let index = 0; index < fileData.length; index++) {
+    fileData[index].inputFileName = fileData[index].name;
+    formData.append('file', fileData[index]);
+  }
   postFiles(formData);
 }
 
+function dragOverHandler(ev) {
+  "use strict";
+  console.log("File(s) in drop zone");
+
+  // Prevent default behavior (Prevent file from being opened)
+  ev.preventDefault();
+  ev.target.classList.add('highlight');
+}
+
+function addFiles(files) {
+  "use strict";
+  var progressBar = document.getElementById("progress-wrapper");
+  progressBar.style.display = "block";
+  var fileData = files;
+  var formData = new FormData();
+  for (let index = 0; index < fileData.length; index++) {
+    fileData[index].inputFileName = fileData[index].name;
+    formData.append('file', fileData[index]);
+  }
+  postFiles(formData);
+}
+
+function dropHandler(ev) {
+  "use strict";
+  console.log("File(s) dropped");
+
+  // Prevent default behavior (Prevent file from being opened)
+  ev.preventDefault();
+  if (ev.dataTransfer.items) {
+    // Use DataTransferItemList interface to access the file(s)
+    [...ev.dataTransfer.items].forEach((item, i) => {
+      // If dropped items aren't files, reject them
+      if (item.kind === "file") {
+        const file = item.getAsFile();
+        console.log(`… file[${i}].name = ${file.name}`);
+      }
+    });
+  } else {
+    // Use DataTransfer interface to access the file(s)
+    [...ev.dataTransfer.files].forEach((file, i) => {
+      console.log(`… file[${i}].name = ${file.name}`);
+    });
+  }
+  addFiles(ev.dataTransfer.files);
+  ev.target.classList.remove('highlight');
+}
diff --git a/embark/templates/uploader/start.html b/embark/templates/uploader/start.html
@@ -8,7 +8,7 @@
         <form action="{% url 'embark-uploader-start-analysis' %}" method="post" id="analyze-form">
             {% csrf_token %}
             <div class="innerBlock">
-                <label for="expertMode">Expert mode</label>
+                <label for="expertModeSwitch">Expert mode</label>
                 <label class="switch">
                     <input id="expertModeSwitch" type="checkbox" onclick="expertModeOn()"/>
                     <span class="slider round"></span>

diff --git a/embark/templates/uploader/upload.html b/embark/templates/uploader/upload.html
@@ -1,7 +1,6 @@
 {% load static %}
 {% block style %}<link rel="stylesheet" type="text/css" href="{% static 'content/css/uploader.css' %}"/>{% endblock style %}
 {% block js %}<script type="text/javascript" src="{% static 'scripts/fileUpload.js' %}"></script>{% endblock js %}
-
 <div class="collapse" id="collapseUpload">
     <div class="col-sm">
         <div class="box">
@@ -11,20 +10,41 @@
                 Selected file:
                 <div id="file-name" class="uploadedFile">None</div>
             </div>
+
+            <div class="upload_dropZone box text-center mb-3 ms-4 me-4 p-4 "
+                id="upload_dropZone"
+                ondrop="dropHandler(event);"
+                ondragover="dragOverHandler(event);">
+                    <legend class="visually-hidden">Firmware uploader drop zone</legend>
+
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-upload" viewBox="0 0 16 16">
+                        <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5"/>
+                        <path d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708z"/>
+                    </svg>
+
+                    <p class="small my-2">Drag &amp; Drop Firmware files</p>
+
+                    <input id="file-input" class="position-absolute invisible" type="file" multiple/>
+
+                    <button type="button" class="btn" >
+                        <label for="file-input">Select file</label>
+                    </button>
+            </div>
+
             <div class="buttonRow">
                 <button type="submit" id="uploadFirmware-btn" class="btn buttonRowElem" onclick="saveFiles();" disabled data-bs-toggle="collapse.show" data-bs-target="collapseDevice">
                     Upload
                 </button>
-                <button type="button" class="btn buttonRowElem" >
-                    <label for="file-input">Select file</label>
-                </button>
+
                 <input id="file-input" type="file" multiple/>
             </div>
+
             <div class="progress-wrapper" id="progress-wrapper">
                 <div class="progress-bar" id="progressBar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                     0%
                 </div>
             </div>
         </div>
     </div>
-</div>
+</div>
+