Fix initial upload for svg and correct the way the cropper elements are hidden when cropping is not possible

src/Umbraco.Web.UI.Client/src/common/directives/components/imaging/umbimagegravity.directive.js

@@ -14,7 +14,7 @@ angular.module("umbraco.directives")
 				scope: {
 					src: '=',
 					center: "=",
-					onImageLoaded: "="
+                    onImageLoaded: "&"
 				},
 				link: function(scope, element, attrs) {
 
@@ -56,23 +56,17 @@ angular.module("umbraco.directives")
 					};
 
                     var setDimensions = function () {
-                        if (scope.src.endsWith(".svg")) {
+                    if (scope.isCroppable) {
-                            // svg files don't automatically get a size by
+					        scope.dimensions.width = $image.width();
-                            // loading them set a default size for now
+					        scope.dimensions.height = $image.height();
-                            $image.attr("width", "200");
+                            
-                            $image.attr("height", "200");
+					        if(scope.center){
-                            // can't crop an svg file, don't show the focal point
+							    scope.dimensions.left =  scope.center.left * scope.dimensions.width -10;
-                            $overlay.remove();
+							    scope.dimensions.top =  scope.center.top * scope.dimensions.height -10;
+						    }else{
+							    scope.center = { left: 0.5, top: 0.5 };
+                            }
                         }
-					    scope.dimensions.width = $image.width();
-					    scope.dimensions.height = $image.height();
-                        
-					    if(scope.center){
-							scope.dimensions.left =  scope.center.left * scope.dimensions.width -10;
-							scope.dimensions.top =  scope.center.top * scope.dimensions.height -10;
-						}else{
-							scope.center = { left: 0.5, top: 0.5 };
-						}
 					};
 
 					var calculateGravity = function(offsetX, offsetY){
@@ -113,10 +107,32 @@ angular.module("umbraco.directives")
 					//// INIT /////
 					$image.load(function() {
 					    $timeout(function() {
+                        scope.isCroppable = true;
+                        scope.hasDimensions = true;
+
+                        if (scope.src !== "undefined") {
+                            if (scope.src.endsWith(".svg")) {
+                                scope.isCroppable = false;
+                                scope.hasDimensions = false;
+                            } else {
+                                // From: https://stackoverflow.com/a/51789597/5018
+                                var type = scope.src.substring(scope.src.indexOf("/") + 1, scope.src.indexOf(";base64"));
+                                if (type.startsWith("svg")) {
+                                    scope.isCroppable = false;
+                                    scope.hasDimensions = false;
+                                }
+                            }
+                        }
+
 					        setDimensions();
 					        scope.loaded = true;
 					        if (angular.isFunction(scope.onImageLoaded)) {
-					            scope.onImageLoaded();
+                                scope.onImageLoaded(
+                                    {
+                                        "isCroppable": scope.isCroppable,
+                                        "hasDimensions": scope.hasDimensions
+                                    }
+                                );
 					        }
 					    });
 					});

src/Umbraco.Web.UI.Client/src/views/components/imaging/umb-image-gravity.html

@@ -1,12 +1,14 @@
 <div class="umb-cropper-gravity">
 	<div class="gravity-container" ng-show="loaded">
-		<div class="viewport">
+	    <div class="viewport">
-			<img ng-src="{{src}}" style="max-width: 100%; max-height: 100%" ng-click="setFocalPoint($event)" draggable="false" />
 
-			<div class="overlay" ng-style="style()">
+	        <img ng-show="isCroppable" ng-src="{{src}}" style="max-width: 100%; max-height: 100%" ng-click="setFocalPoint($event)" draggable="false"/>
+	        <img ng-show="!isCroppable && !hasDimensions" ng-src="{{src}}" width="200" height="200" draggable="false" style="cursor: default;"/>
 
-			</div>
+	        <div ng-show="isCroppable" ng-when="isCroppable" class="overlay" ng-style="style()">
 
-		</div>
+	        </div>
+
+	    </div>
 	</div>
 </div>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.controller.js

@@ -72,8 +72,10 @@ angular.module('umbraco')
             }
         };
 
-        $scope.imageLoaded = function() {
+        $scope.imageLoaded = function (isCroppable, hasDimensions) {
             $scope.imageIsLoaded = true;
+            $scope.isCroppable = isCroppable;
+            $scope.hasDimensions = hasDimensions;
         };
 
         //on image selected, update the cropper
@@ -114,7 +116,7 @@ angular.module('umbraco')
     })
     .run(function (mediaHelper, umbRequestHelper) {
         if (mediaHelper && mediaHelper.registerFileResolver) {
-
+            
             //NOTE: The 'entity' can be either a normal media entity or an "entity" returned from the entityResource
             // they contain different data structures so if we need to query against it we need to be aware of this.
             mediaHelper.registerFileResolver("Umbraco.ImageCropper", function (property, entity, thumbnail) {

src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.html

@@ -1,7 +1,6 @@
 <div class="umb-editor umb-mediapicker"
      ng-controller="Umbraco.PropertyEditors.ImageCropperController">
 
-
     <span class="fileinput-button umb-upload-button-big"
           style="margin-bottom: 5px;"
           ng-hide="imageSrc">
@@ -42,12 +41,12 @@
                 <umb-image-gravity
                     src="imageSrc"
                     center="model.value.focalPoint"
-                    on-image-loaded="imageLoaded">
+                    on-image-loaded="imageLoaded(isCroppable, hasDimensions)">
                 </umb-image-gravity>
                 <a href class="btn btn-link btn-crop-delete" ng-click="clear()"><i class="icon-delete red"></i> <localize key="content_uploadClear">Remove file</localize></a>
             </div>
-            
+
-            <ul ng-if="!imageSrc.endsWith('.svg')" class="umb-sortable-thumbnails cropList clearfix">
+            <ul ng-if="isCroppable" class="umb-sortable-thumbnails cropList clearfix">
                 <li ng-repeat=" (key,value) in model.value.crops" ng-class="{'current':currentCrop.alias === value.alias}" ng-click="crop(value)">
 
                     <umb-image-thumbnail center="model.value.focalPoint"