From f02a16f094e9f901acdcc5e3bb90bf128db55f71 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bf@oerskov-gruppen.lan>
Date: Mon, 6 Jul 2020 16:33:19 +0200
Subject: [PATCH] Register dragover state of file upload

---
 .../components/upload/umbfileupload.directive.js      | 11 +++++++++++
 .../upload/umbpropertyfileupload.directive.js         |  8 ++++++++
 .../src/less/components/umb-property-file-upload.less |  6 ++++++
 .../components/upload/umb-property-file-upload.html   |  2 +-
 4 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/upload/umbfileupload.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/upload/umbfileupload.directive.js
index 6a8ffa7969..3581aed9e0 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/upload/umbfileupload.directive.js
+++ b/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 });
+            });
         }
     };
 }
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/upload/umbpropertyfileupload.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/upload/umbpropertyfileupload.directive.js
index 653b4f427c..90dbbc650d 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/upload/umbpropertyfileupload.directive.js
+++ b/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
              */
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-property-file-upload.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-property-file-upload.less
index 39b2f4002e..7a2883efd1 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-property-file-upload.less
+++ b/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;
+        }
+    }
 }
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/upload/umb-property-file-upload.html b/src/Umbraco.Web.UI.Client/src/views/components/upload/umb-property-file-upload.html
index 9b4e60a413..2069707f20 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/upload/umb-property-file-upload.html
+++ b/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"