Drag'n Drop or choose ASCII-armored key file

src/static/js/manage.js

@@ -49,5 +49,54 @@
     $('#' + region + ' .alert-' + outcome + ' span').text(text);
     $('#' + region + ' .alert-' + outcome).removeClass('hidden');
   }
+  
+  $('#drop_zone').on('drop',
+    function(ev) {
+      // Prevent default behavior (Prevent file from being opened)
+      ev.stopPropagation();
+      ev.preventDefault();
+      $('#addKey .alert').addClass('hidden');
+      if(ev.originalEvent.dataTransfer.files[0].type != "text/plain") {
+        alert('addKey', 'danger', 'You must import an ascii-armored key file!');
+        return;
+      }      
+      handleFiles(ev.originalEvent.dataTransfer.files);
+  });
+  $('#drop_zone').on('dragover', 
+    function(ev) {
+      // Prevent default behavior (Prevent file from being opened)
+      ev.stopPropagation();
+      ev.preventDefault();
+      ev.originalEvent.dataTransfer.dropEffect = 'copy';
+  });
+  $('#drop_zone').on('dragenter', 
+    function(ev) {
+      // Prevent default behavior (Prevent file from being opened)
+      ev.stopPropagation();
+      ev.preventDefault();
+      ev.originalEvent.dataTransfer.dropEffect = 'copy';
+  });
 
-}(jQuery));
+  $('#fileSelect').click(function() {
+    $('#file-selector').click();
+  });
+
+  $('#file-selector').change(function() {
+    $('#addKey .alert').addClass('hidden');
+    handleFiles(this.files);
+  });
+  
+  function handleFiles(files) {
+    if(files.length > 1) {
+      alert('addKey', 'danger', 'You must import a single file!');
+      return;
+    }
+    const file = files[0];
+    const reader = new FileReader();
+    reader.onload = function(){
+      $('#addKey textarea').val(reader.result);
+    } 
+    reader.readAsText(file);
+   }
+
+}(jQuery));

src/view/manage.html

@@ -24,7 +24,9 @@
         <div class="progress-bar progress-bar-striped active" role="progressbar"></div>
       </div>
       <form action="/pks/add" method="post">
-        <p><textarea class="form-control" name="keytext" rows="5" spellcheck="false" placeholder="Paste PGP PUBLIC KEY BLOCK here ..." required></textarea></p>
+        <p><textarea id="drop_zone" class="form-control ui-droppable" name="keytext" rows="5" spellcheck="false" placeholder="Drag a single ascii-armored key file here or paste PGP PUBLIC KEY BLOCK here ..." required></textarea></p>
+        <input type="file" id="file-selector" accept="text/plain" style="display:none">
+        <p>Or <button type="button" id="fileSelect">select a file</button> </p>
         <input class="btn btn-primary btn-lg" type="submit" value="Upload">
       </form>
       <hr>