From c90a0ecfdce26862bf8cd5b9f7fcc1306854c73d Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Fri, 3 Feb 2023 10:20:23 +0100
Subject: [PATCH] add check for editorState.getCurrent to find the current
 editor (relevant in infinite editors), and throw a warning if an editor
 completely misses the current node context (#13778)

disable drag&drop entirely if the property editor did not get a node through bindings or editorState
---
 .../umb-media-picker3-property-editor.html    | 27 ++++++++++---------
 ...umbMediaPicker3PropertyEditor.component.js | 12 ++++++++-
 2 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umb-media-picker3-property-editor.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umb-media-picker3-property-editor.html
index c25b1d506a..a5757860c9 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umb-media-picker3-property-editor.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umb-media-picker3-property-editor.html
@@ -2,13 +2,14 @@
 
     <umb-load-indicator ng-if="vm.loading"></umb-load-indicator>
 
-    <div 
+    <div
         class="dropzone"
         ngf-drop
         ngf-change="vm.handleFiles($files, $invalidFiles)"
         ngf-drag-over-class="'drag-over'"
         ngf-multiple="{{vm.model.config.multiple}}"
         ngf-allow-dir="{{ vm.allowDir }}"
+        ngf-drop-disabled="{{!vm.allowDropMedia}}"
         ng-disabled="vm.readonly">
 
         <div class="drop-overlay">
@@ -44,7 +45,7 @@
                                 </div>
                             </div>
 
-                            <img 
+                            <img
                                 ng-if="media.$dataURL"
                                 ng-src="{{media.$dataURL}}"
                                 title="{{media.name}}"
@@ -56,22 +57,22 @@
                                 text="{{media.name}}"
                                 extension="{{media.$extension}}">
                             </umb-file-icon>
-                            
-                            <button 
-                                type="button" 
-                                class="btn-reset __info" 
-                                ng-click="vm.editMedia(media, $index, $event)" 
+
+                            <button
+                                type="button"
+                                class="btn-reset __info"
+                                ng-click="vm.editMedia(media, $index, $event)"
                                 ng-disabled="media.$uploadProgress < 100">
                                 <div class="__name" ng-bind="media.name"></div>
                             </button>
 
                             <div class="__actions">
-                                <button 
-                                    ng-if="vm.allowRemoveMedia" 
-                                    type="button" class="btn-reset __action umb-outline" 
-                                    localize="title" 
-                                    title="general_remove" 
-                                    ng-click="vm.removeMedia(media); $event.stopPropagation();" 
+                                <button
+                                    ng-if="vm.allowRemoveMedia"
+                                    type="button" class="btn-reset __action umb-outline"
+                                    localize="title"
+                                    title="general_remove"
+                                    ng-click="vm.removeMedia(media); $event.stopPropagation();"
                                     ng-disabled="media.$uploadProgress < 100">
                                     <umb-icon icon="icon-trash" class="icon"></umb-icon>
                                 </button>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umbMediaPicker3PropertyEditor.component.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umbMediaPicker3PropertyEditor.component.js
index 0e61b4b5fa..67488c55dd 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umbMediaPicker3PropertyEditor.component.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umbMediaPicker3PropertyEditor.component.js
@@ -29,7 +29,7 @@
             }
         });
 
-    function MediaPicker3Controller($scope, editorService, clipboardService, localizationService, overlayService, userService, entityResource, $attrs, umbRequestHelper, $injector, uploadTracker) {
+    function MediaPicker3Controller($scope, $element, editorService, clipboardService, localizationService, overlayService, userService, entityResource, $attrs, umbRequestHelper, $injector, uploadTracker, editorState) {
 
         const mediaUploader = $injector.instantiate(Utilities.MediaUploader);
         let uploadInProgress = false;
@@ -50,6 +50,7 @@
         vm.allowAddMedia = true;
         vm.allowRemoveMedia = true;
         vm.allowEditMedia = true;
+        vm.allowDropMedia = true;
 
         vm.handleFiles = handleFiles;
 
@@ -74,11 +75,20 @@
             vm.allowAddMedia = !vm.readonly;
             vm.allowRemoveMedia = !vm.readonly;
             vm.allowEditMedia = !vm.readonly;
+            vm.allowDropMedia = !vm.readonly;
 
             vm.sortableOptions.disabled = vm.readonly;
         });
 
         vm.$onInit = function() {
+            vm.node = vm.node || editorState.getCurrent();
+
+            // If we do not have a node on the scope, then disallow drop media
+            if (!vm.node?.key) {
+              console.warn('An Umbraco.MediaPicker3 did not detect a valid content node and disabled drag & drop.', $element[0]);
+              vm.allowDropMedia = false;
+            }
+
             vm.validationLimit = vm.model.config.validationLimit || {};
             // If single-mode we only allow 1 item as the maximum:
             if(vm.model.config.multiple === false) {