From fda7251aedba177bf0add71ad8bdc1ddc0c1910c Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Fri, 12 Jun 2020 16:01:19 +0200
Subject: [PATCH] Upload media and select media type (#8043)

---
 .../upload/umbfiledropzone.directive.js       | 43 ++++++++++---------
 .../components/upload/umb-file-dropzone.html  |  7 ---
 .../propertyeditors/grid/grid.controller.js   | 35 +++++++--------
 3 files changed, 41 insertions(+), 44 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/upload/umbfiledropzone.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/upload/umbfiledropzone.directive.js
index 3fb1b3eb36..7f405eb28c 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/upload/umbfiledropzone.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/upload/umbfiledropzone.directive.js
@@ -20,7 +20,7 @@ TODO
 
 angular.module("umbraco.directives")
     .directive('umbFileDropzone',
-        function($timeout, Upload, localizationService, umbRequestHelper) {
+        function ($timeout, Upload, localizationService, umbRequestHelper, overlayService) {
             return {
                 restrict: 'E',
                 replace: true,
@@ -119,9 +119,8 @@ angular.module("umbraco.directives")
                             //auto-clear the done queue after 3 secs
                             var currentLength = scope.done.length;
                             $timeout(function() {
-                                    scope.done.splice(0, currentLength);
-                                },
-                                3000);
+                                scope.done.splice(0, currentLength);
+                            }, 3000);
                         }
                     }
 
@@ -197,30 +196,34 @@ angular.module("umbraco.directives")
                     }
 
                     function _chooseMediaType() {
-                        scope.mediatypepickerOverlay = {
-                            view: "mediatypepicker",
-                            title: "Choose media type",
-                            acceptedMediatypes: scope.acceptedMediatypes,
-                            hideSubmitButton: true,
-                            show: true,
-                            submit: function(model) {
-                                scope.contentTypeAlias = model.selectedType.alias;
-                                scope.mediatypepickerOverlay.show = false;
-                                scope.mediatypepickerOverlay = null;
-                                _processQueueItem();
-                            },
-                            close: function(oldModel) {
 
-                                scope.queue.map(function(file) {
+                        const dialog = {
+                            view: "itempicker",
+                            filter: scope.acceptedMediatypes.length > 15,
+                            availableItems: scope.acceptedMediatypes,
+                            submit: function (model) {
+                                scope.contentTypeAlias = model.selectedItem.alias;
+                                _processQueueItem();
+
+                                overlayService.close();
+                            },
+                            close: function () {
+
+                                scope.queue.map(function (file) {
                                     file.uploadStatus = "error";
                                     file.serverErrorMessage = "Cannot upload this file, no mediatype selected";
                                     scope.rejected.push(file);
                                 });
                                 scope.queue = [];
-                                scope.mediatypepickerOverlay.show = false;
-                                scope.mediatypepickerOverlay = null;
+
+                                overlayService.close();
                             }
                         };
+
+                        localizationService.localize("defaultdialogs_selectMediaType").then(value => {
+                            dialog.title = value;
+                            overlayService.open(dialog);
+                        });
                     }
 
                     scope.handleFiles = function(files, event) {
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/upload/umb-file-dropzone.html b/src/Umbraco.Web.UI.Client/src/views/components/upload/umb-file-dropzone.html
index 1a0086e836..b079b72be4 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/upload/umb-file-dropzone.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/upload/umb-file-dropzone.html
@@ -104,11 +104,4 @@
 
 </ng-form>
 
-<umb-overlay
-		ng-if="mediatypepickerOverlay.show"
-		model="mediatypepickerOverlay"
-        view="mediatypepickerOverlay.view"
-		position="right">
-</umb-overlay>
-
 </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js
index 2568f62cf4..a0826f7a96 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js
@@ -318,25 +318,26 @@ angular.module("umbraco")
             // Add items overlay menu
             // *********************************************
             $scope.openEditorOverlay = function (event, area, index, key) {
-                var title = "";
-                localizationService.localize("grid_insertControl").then(function (value) {
-                    title = value;
-                    overlayService.open({
-                        view: "itempicker",
-                        filter: area.$allowedEditors.length > 15,
-                        title: title,
-                        availableItems: area.$allowedEditors,
-                        event: event,
-                        submit: function (model) {
-                            if (model.selectedItem) {
-                                $scope.addControl(model.selectedItem, area, index);
-                                overlayService.close();
-                            }
-                        },
-                        close: function () {
+
+                const dialog = {
+                    view: "itempicker",
+                    filter: area.$allowedEditors.length > 15,
+                    availableItems: area.$allowedEditors,
+                    event: event,
+                    submit: function (model) {
+                        if (model.selectedItem) {
+                            $scope.addControl(model.selectedItem, area, index);
                             overlayService.close();
                         }
-                    });
+                    },
+                    close: function () {
+                        overlayService.close();
+                    }
+                };
+
+                localizationService.localize("grid_insertControl").then(value => {
+                    dialog.title = value;
+                    overlayService.open(dialog);
                 });
             };