Metadata editor / add visual indication when dragging a file to upload (#8678)

Author: josegar74

web-ui/src/main/resources/catalog/components/filestore/FileStoreDirective.js

@@ -71,6 +71,18 @@
               input.attr("multiple", "multiple");
             }
 
+            var droparea = $(".file-drop-area");
+
+            // highlight drag area
+            input.on("dragenter focus click", function () {
+              droparea.addClass("is-active");
+            });
+
+            // back to normal state
+            input.on("dragleave blur drop", function () {
+              droparea.removeClass("is-active");
+            });
+
             var uploadFile = function () {
               scope.queue = [];
               scope.filestoreUploadOptions = angular.extend(

web-ui/src/main/resources/catalog/components/filestore/partials/dataUploaderButton.html

@@ -1,5 +1,5 @@
 <div
-  class="form-horizontal"
+  class="form-horizontal file-drop-area"
   data-ng-show="uuid"
   id="gn-upload-{{id}}"
   data-file-upload="filestoreUploadOptions"

web-ui/src/main/resources/catalog/style/gn_editor.less

@@ -1030,3 +1030,12 @@ gn-bounding-polygon {
     opacity: 0.65;
   }
 }
+
+.file-drop-area {
+  padding: 10px;
+}
+
+.is-active {
+  background-color: #e2edf7;
+  border-radius: 3px;
+}