Register dragover state of file upload

src/Umbraco.Web.UI.Client/src/common/directives/components/upload/umbfileupload.directive.js

@@ -19,6 +19,17 @@ function umbFileUpload() {
                 //clear the element value - this allows us to pick the same file again and again
                 el.val('');
             });
+
+            el.on('drag dragstart dragend dragover dragenter dragleave drop', function (e) {
+                e.preventDefault();
+                e.stopPropagation();
+            })
+            .on('dragover dragenter', function () {
+                scope.$emit("isDragover", { value: true });
+            })
+            .on('dragleave dragend drop', function () {
+                scope.$emit("isDragover", { value: false });
+            });
         }
     };
 }

src/Umbraco.Web.UI.Client/src/common/directives/components/upload/umbpropertyfileupload.directive.js

@@ -78,6 +78,8 @@
         /** Called when the component initializes */
         function onInit() {
             $scope.$on("filesSelected", onFilesSelected);
+            $scope.$on("isDragover", isDragover);
+
             initialize();
         }
 
@@ -293,6 +295,11 @@
             }
         }
 
+        function isDragover(e, args) {
+            vm.dragover = args.value;
+            angularHelper.safeApply($scope);
+        }
+
     };
 
     var umbPropertyFileUploadComponent = {
@@ -303,6 +310,7 @@
             propertyAlias: "@",
             value: "<",
             hideSelection: "<",
+            dragover: "<",
             /**
              * Called when a file is selected on this instance
              */

src/Umbraco.Web.UI.Client/src/less/components/umb-property-file-upload.less

@@ -26,4 +26,10 @@
             width: 100%;
         }
     }
+
+    .drag-over {
+        .umb-upload-button-big {
+            border-color: @gray-1;
+        }
+    }
 }

src/Umbraco.Web.UI.Client/src/views/components/upload/umb-property-file-upload.html

@@ -1,6 +1,6 @@
 <div class="umb-property-file-upload">
 
-    <ng-form name="vm.fileUploadForm">
+    <ng-form name="vm.fileUploadForm" ng-class="{ 'drag-over': vm.dragover }">
         <input type="hidden" ng-model="mandatoryValidator" ng-required="vm.required && !vm.files.length" />
 
         <div class="fileinput-button umb-upload-button-big"