4.24.0

app/static/js/utils/drag-drop-into-text.js

@@ -8,7 +8,8 @@ function enableDragDropForPGPKeys(inputID) {
         let files = event.dataTransfer.files;
         for (let i = 0; i < files.length; i++) {
             let file = files[i];
-            if(file.type !== 'text/plain'){
+            const isValidPgpFile = file.type === 'text/plain' || file.name.endsWith('.asc') || file.name.endsWith('.pub') || file.name.endsWith('.pgp') || file.name.endsWith('.key');
+            if (!isValidPgpFile) {
                 toastr.warning(`File ${file.name} is not a public key file`);
                 continue;
             }
@@ -16,6 +17,7 @@ function enableDragDropForPGPKeys(inputID) {
             reader.onloadend = onFileLoaded;
             reader.readAsBinaryString(file);
         }
+        dropArea.classList.remove("dashed-outline");
     }
 
     function onFileLoaded(event) {
@@ -24,5 +26,20 @@ function enableDragDropForPGPKeys(inputID) {
     }
 
     const dropArea = $(inputID).get(0);
+    dropArea.addEventListener("dragenter", (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        dropArea.classList.add("dashed-outline");
+    });
+    dropArea.addEventListener("dragover", (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        dropArea.classList.add("dashed-outline");
+    });
+    dropArea.addEventListener("dragleave", (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        dropArea.classList.remove("dashed-outline");
+    });
     dropArea.addEventListener("drop", drop, false);
-}
+}

app/static/style.css

@@ -217,4 +217,9 @@ textarea.parsley-error {
 
 .italic {
     font-style: italic;
+}
+
+/* dashed outline to indicate droppable area */
+.dashed-outline {
+    outline: 4px dashed gray;
 }