From 3f30be450dc8d4786bbbaa615716e5954d447f28 Mon Sep 17 00:00:00 2001
From: Warren Buckley <warren@umbraco.com>
Date: Wed, 18 Sep 2019 15:27:30 +0100
Subject: [PATCH] Emit event when upload of image starts & stops Listen for
 events in content edit JS controller to change the state of the buttons to be
 'busy' to avoid page/node being saved whilst large image is uploaded or slow
 connection

---
 .../directives/components/content/edit.controller.js | 12 ++++++++++++
 .../src/common/services/tinymce.service.js           | 10 +++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js
index 806d43f92b..409efec1b0 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js
@@ -171,6 +171,18 @@
                 }
             }));
 
+            evts.push(eventsService.on("rte.file.uploading", function(){
+                notificationsService.info("Saving Disabled", "The node cannot be saved until the image/s has finished uploading")
+
+                $scope.page.saveButtonState = "busy";
+                $scope.page.buttonGroupState = "busy";
+
+            }));
+
+            evts.push(eventsService.on("rte.file.uploaded", function(){
+                $scope.page.saveButtonState = "success";
+                $scope.page.buttonGroupState = "success";
+            }));
         }
 
         /**
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js b/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js
index a28318519c..7512da293c 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js
@@ -7,7 +7,7 @@
  * A service containing all logic for all of the Umbraco TinyMCE plugins
  */
 function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, stylesheetResource, macroResource, macroService,
-    $routeParams, umbRequestHelper, angularHelper, userService, editorService, entityResource) {
+    $routeParams, umbRequestHelper, angularHelper, userService, editorService, entityResource, eventsService) {
 
     //These are absolutely required in order for the macros to render inline
     //we put these as extended elements because they get merged on top of the normal allowed elements by tiny mce
@@ -167,6 +167,14 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
         xhr = new XMLHttpRequest();
         xhr.open('POST', Umbraco.Sys.ServerVariables.umbracoUrls.tinyMceApiBaseUrl + 'UploadImage');
 
+        xhr.onloadstart = function(e) {
+            eventsService.emit("rte.file.uploading");
+        };
+
+        xhr.onloadend = function(e) {
+            eventsService.emit("rte.file.uploaded");
+        };
+
         xhr.upload.onprogress = function (e) {
             progress(e.loaded / e.total * 100);
         };