v8: Fix media picker svg preview (#6418)

umbraco · Sep 29, 2019 · fa0bdd5 · fa0bdd5
1 parent e20437d
commit fa0bdd5
Show file tree

Hide file tree

Showing 10 changed files with 289 additions and 232 deletions.
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js
@@ -122,17 +122,16 @@ Use this directive to generate a thumbnail grid of media items.
                     item.selectable = getSelectableState(item);
 
                     // remove non images when onlyImages is set to true
-                    if( scope.onlyImages === "true" && !item.isFolder && !item.thumbnail){
+                    if (scope.onlyImages === "true" && !item.isFolder && !item.thumbnail){
                         scope.items.splice(i, 1);
                         i--;
                     }
 
-
                     // If subfolder search is not enabled remove the media items that's not needed
                     // Make sure that includeSubFolder is not undefined since the directive is used
                     // in contexts where it should not be used. Currently only used when we trigger
                     // a media picker
-                    if(scope.includeSubFolders !== undefined){
+                    if (scope.includeSubFolders !== undefined) {
                         if (scope.includeSubFolders !== 'true') {
                             if (item.parentId !== parseInt(scope.currentFolderId)) {
                                 scope.items.splice(i, 1);
@@ -146,13 +145,12 @@ Use this directive to generate a thumbnail grid of media items.
                 if (scope.items.length > 0) {
                     setFlexValues(scope.items);
                 }
-
             }
 
             function setItemData(item) {
 
                 // check if item is a folder
-                if(item.image) {
+                if (item.image) {
                     // if is has an image path, it is not a folder
                     item.isFolder = false;
                 } else {
@@ -163,7 +161,7 @@ Use this directive to generate a thumbnail grid of media items.
                 if (!item.isFolder && !item.thumbnail) {
 
                     // handle entity
-                    if(item.image) {
+                    if (item.image) {
                         item.thumbnail = mediaHelper.resolveFileFromEntity(item, true);
                         item.extension = mediaHelper.getFileExtension(item.image);
                     // handle full media object
@@ -288,10 +286,8 @@ Use this directive to generate a thumbnail grid of media items.
                         "min-height": itemMinHeight + "px"
                     };
 
-                        mediaItem.flexStyle = flexStyle;
-
+                    mediaItem.flexStyle = flexStyle;
                 }
-
             }
 
             scope.clickItem = function(item, $event, $index) {

diff --git a/src/Umbraco.Web.UI.Client/src/common/services/mediahelper.service.js b/src/Umbraco.Web.UI.Client/src/common/services/mediahelper.service.js
@@ -143,22 +143,27 @@ function mediaHelper(umbRequestHelper, $log) {
          */
         resolveFileFromEntity: function (mediaEntity, thumbnail) {
 
-            if (!angular.isObject(mediaEntity.metaData) || !mediaEntity.metaData.MediaPath) {
+            var mediaPath = angular.isObject(mediaEntity.metaData) ? mediaEntity.metaData.MediaPath : null;
+
+            if (!mediaPath) {
                 //don't throw since this image legitimately might not contain a media path, but output a warning
                 $log.warn("Cannot resolve the file url from the mediaEntity, it does not contain the required metaData");
                 return null;
             }
 
             if (thumbnail) {
-                if (this.detectIfImageByExtension(mediaEntity.metaData.MediaPath)) {
-                    return this.getThumbnailFromPath(mediaEntity.metaData.MediaPath);
+                if (this.detectIfImageByExtension(mediaPath)) {
+                    return this.getThumbnailFromPath(mediaPath);
+                }
+                else if (this.getFileExtension(mediaPath) === "svg") {
+                    return this.getThumbnailFromPath(mediaPath);
                 }
                 else {
                     return null;
                 }
             }
             else {
-                return mediaEntity.metaData.MediaPath;
+                return mediaPath;
             }            
         },
 
@@ -294,7 +299,12 @@ function mediaHelper(umbRequestHelper, $log) {
          */
         getThumbnailFromPath: function (imagePath) {
 
-            //If the path is not an image we cannot get a thumb
+            // Check if file is a svg
+            if (this.getFileExtension(imagePath) === "svg") {
+                return imagePath;
+            }
+
+            // If the path is not an image we cannot get a thumb
             if (!this.detectIfImageByExtension(imagePath)) {
                 return null;
             }

diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
@@ -279,15 +279,16 @@
     }
 }
 
-.umb-mediapicker .label{
-    &__trashed{
+.umb-mediapicker .label {
+    &__trashed {
         background-color: @red;
         position: absolute;
         top: 50%;
         left: 50%;
         z-index: 1;
         transform: translate3d(-50%,-50%,0);
         margin: 0;
+        pointer-events: none;
     }
 }