From d37b65adcf580d25b2e83707610df7cb32391a39 Mon Sep 17 00:00:00 2001
From: bjarnef <bjarne_fyrstenborg@hotmail.com>
Date: Tue, 26 Jul 2016 14:45:03 +0200
Subject: [PATCH 1/3] Extend model with extension property, display svg in
 <img> and font icon for other files

---
 .../components/umbmediagrid.directive.js      | 16 ++++++++++++
 .../src/less/property-editors.less            | 25 +++++++++++++++++++
 .../src/views/components/umb-media-grid.html  | 10 ++++----
 .../fileupload/fileupload.controller.js       |  3 +++
 .../fileupload/fileupload.html                | 11 +++++---
 5 files changed, 57 insertions(+), 8 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
index 7d2da34988..e9e7395761 100644
--- 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
@@ -138,6 +138,22 @@ Use this directive to generate a thumbnail grid of media items.
                 if (!item.isFolder) {
                     item.thumbnail = mediaHelper.resolveFile(item, true);
                     item.image = mediaHelper.resolveFile(item, false);
+
+                    var fileProp = _.find(item.properties, function (v) {
+                        return (v.alias === "umbracoFile");
+                    });
+
+                    if (fileProp && fileProp.value) {
+                        item.file = fileProp.value;
+                    }
+
+                    var extensionProp = _.find(item.properties, function (v) {
+                        return (v.alias === "umbracoExtension");
+                    });
+
+                    if (extensionProp && extensionProp.value) {
+                        item.extension = extensionProp.value;
+                    }
                 }
             }
 
diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
index 85a1d9e36c..16d48807eb 100644
--- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less
+++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
@@ -704,6 +704,31 @@ ul.color-picker li a  {
   padding-top: 27px;
 }
 
+.umb-fileupload .file-icon {
+  text-align: center;
+  display: block;
+  position: relative;
+  padding: 5px 0;
+
+  > .icon {
+    font-size: 70px;
+    line-height: 110%;
+    color: #666;
+    text-align: center;
+  }
+
+  > span {
+    color: #fff;
+    background: #666;
+    padding: 1px 3px;
+    font-size: 12px;
+    line-height: 130%;
+    position: absolute;
+    top: 45px;
+    left: 110px;
+  }
+}
+
 .umb-fileupload input {
   font-size: 12px;
   line-height: 1;
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html
index 5cd6d5c82f..5e0a8c1ea5 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html
@@ -1,7 +1,6 @@
 <div class="umb-media-grid">
     <div class="umb-media-grid__item" ng-click="clickItem(item, $event, $index)" ng-repeat="item in items | filter:filterBy" ng-style="item.flexStyle" ng-class="{'-selected': item.selected, '-file': !item.thumbnail}">
         <div>
-
             <i ng-show="item.selected" class="icon-check umb-media-grid__checkmark"></i>
 
             <div class="umb-media-grid__item-overlay" ng-class="{'-locked': item.selected}" ng-click="clickItemName(item, $event, $index)">
@@ -9,11 +8,12 @@
                 <div class="umb-media-grid__item-name">{{item.name}}</div>
             </div>
 
-            <div class="umb-media-grid__image-background" ng-if="item.thumbnail"></div>
-            <img class="umb-media-grid__item-image" width="{{item.width}}" height="{{item.height}}" ng-if="item.thumbnail" ng-src="{{item.thumbnail}}" alt="{{item.name}}" draggable="false"/>
-            <img class="umb-media-grid__item-image-placeholder" ng-if="!item.thumbnail" src="assets/img/transparent.png" alt="{{item.name}}" draggable="false"/>
+            <div class="umb-media-grid__image-background" ng-if="item.thumbnail || item.extension == 'svg'"></div>
+            <img class="umb-media-grid__item-image" width="{{item.width}}" height="{{item.height}}" ng-if="item.thumbnail" ng-src="{{item.thumbnail}}" alt="{{item.name}}" draggable="false" />
+            <img class="umb-media-grid__item-image" width="{{item.width}}" height="{{item.height}}" ng-if="!item.thumbnail && item.extension == 'svg'" ng-src="{{item.file}}" alt="{{item.name}}" draggable="false" />
+            <img class="umb-media-grid__item-image-placeholder" ng-if="!item.thumbnail && item.extension != 'svg'" src="assets/img/transparent.png" alt="{{item.name}}" draggable="false" />
 
-            <i class="umb-media-grid__item-icon {{ item.icon }}" ng-if="!item.thumbnail"></i>
+            <i class="umb-media-grid__item-icon {{item.icon}}" ng-if="!item.thumbnail && item.extension != 'svg'"></i>
 
         </div>
     </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/fileupload/fileupload.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/fileupload/fileupload.controller.js
index 4285cf0f77..df21541f09 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/fileupload/fileupload.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/fileupload/fileupload.controller.js
@@ -71,7 +71,10 @@ function fileUploadController($scope, $element, $compile, imageHelper, fileManag
                         "GetBigThumbnail",
                         [{ originalImagePath: file.file }]);
 
+            var extension = file.file.substring(file.file.lastIndexOf(".") + 1, file.file.length);
+
             file.thumbnail = thumbnailUrl;
+            file.extension = extension.toLowerCase();
         });
 
         $scope.clearFiles = false;
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/fileupload/fileupload.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/fileupload/fileupload.html
index c213378b23..0905de07f9 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/fileupload/fileupload.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/fileupload/fileupload.html
@@ -1,10 +1,15 @@
 <div class="umb-editor umb-fileupload" ng-controller="Umbraco.PropertyEditors.FileUploadController">
-
+    
     <div ng-show="persistedFiles.length > 0">
         <ul class="thumbnails">
             <li class="span4 thumbnail" ng-repeat="file in persistedFiles">
-                <a href="{{file.file}}" target="_blank" ng-switch on="file.isImage" >
-                    <img ng-src="{{file.thumbnail}}" ng-switch-when="true" alt="{{file.file}}"/>
+                <a href="{{file.file}}" target="_blank" ng-switch on="file.isImage">
+                    <img ng-src="{{file.thumbnail}}" ng-switch-when="true" alt="{{file.file}}" />
+                    <img ng-src="{{file.file}}" ng-switch-when="false" ng-if="file.extension == 'svg'" alt="{{file.file}}" />
+                    <span class="file-icon" ng-if="!file.isImage && file.extension != 'svg'">
+                        <i class="icon icon-document"></i>
+                        <span>.{{file.extension}}</span>
+                    </span>
                     <span ng-switch-default>{{file.file}}</span>
                 </a>
             </li>

From c5b9e6a1945f79f168c908bbccf99eb05a133152 Mon Sep 17 00:00:00 2001
From: bjarnef <bjarne_fyrstenborg@hotmail.com>
Date: Wed, 27 Jul 2016 01:36:17 +0200
Subject: [PATCH 2/3] Load svg in <object> to have access to events and be able
 to manipulate svg

---
 .../src/views/components/umb-media-grid.html                 | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html
index 5e0a8c1ea5..6d6ff0d599 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html
@@ -1,5 +1,5 @@
 <div class="umb-media-grid">
-    <div class="umb-media-grid__item" ng-click="clickItem(item, $event, $index)" ng-repeat="item in items | filter:filterBy" ng-style="item.flexStyle" ng-class="{'-selected': item.selected, '-file': !item.thumbnail}">
+    <div class="umb-media-grid__item" ng-click="clickItem(item, $event, $index)" ng-repeat="item in items | filter:filterBy" ng-style="item.flexStyle" ng-class="{'-selected': item.selected, '-file': !item.thumbnail, '-svg': item.extension == 'svg'}">
         <div>
             <i ng-show="item.selected" class="icon-check umb-media-grid__checkmark"></i>
 
@@ -10,7 +10,8 @@
 
             <div class="umb-media-grid__image-background" ng-if="item.thumbnail || item.extension == 'svg'"></div>
             <img class="umb-media-grid__item-image" width="{{item.width}}" height="{{item.height}}" ng-if="item.thumbnail" ng-src="{{item.thumbnail}}" alt="{{item.name}}" draggable="false" />
-            <img class="umb-media-grid__item-image" width="{{item.width}}" height="{{item.height}}" ng-if="!item.thumbnail && item.extension == 'svg'" ng-src="{{item.file}}" alt="{{item.name}}" draggable="false" />
+            <object class="umb-media-grid__item-image" width="{{item.width}}" height="{{item.height}}" ng-if="!item.thumbnail && item.extension == 'svg'" type="image/svg+xml" data="{{item.file}}" alt="{{item.name}}" draggable="false"></object>
+
             <img class="umb-media-grid__item-image-placeholder" ng-if="!item.thumbnail && item.extension != 'svg'" src="assets/img/transparent.png" alt="{{item.name}}" draggable="false" />
 
             <i class="umb-media-grid__item-icon {{item.icon}}" ng-if="!item.thumbnail && item.extension != 'svg'"></i>

From 67430392e35abbed1f18748f40455e172d00440d Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Mon, 8 Aug 2016 11:22:16 +0200
Subject: [PATCH 3/3] Change object to img to make it render in Edge

---
 .../src/views/components/umb-media-grid.html          | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html
index 6d6ff0d599..b680ec9daa 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html
@@ -8,12 +8,19 @@
                 <div class="umb-media-grid__item-name">{{item.name}}</div>
             </div>
 
+            <!-- Check backgrund -->
             <div class="umb-media-grid__image-background" ng-if="item.thumbnail || item.extension == 'svg'"></div>
-            <img class="umb-media-grid__item-image" width="{{item.width}}" height="{{item.height}}" ng-if="item.thumbnail" ng-src="{{item.thumbnail}}" alt="{{item.name}}" draggable="false" />
-            <object class="umb-media-grid__item-image" width="{{item.width}}" height="{{item.height}}" ng-if="!item.thumbnail && item.extension == 'svg'" type="image/svg+xml" data="{{item.file}}" alt="{{item.name}}" draggable="false"></object>
 
+            <!-- Image thumbnail -->
+            <img class="umb-media-grid__item-image" width="{{item.width}}" height="{{item.height}}" ng-if="item.thumbnail" ng-src="{{item.thumbnail}}" alt="{{item.name}}" draggable="false" />
+
+            <!-- SVG -->
+            <img class="umb-media-grid__item-image" width="{{item.width}}" height="{{item.height}}" ng-if="!item.thumbnail && item.extension == 'svg'" ng-src="{{item.file}}" alt="{{item.name}}" draggable="false" />
+
+            <!-- Transparent image - fallback - used to keep image proportions on wrapper-->
             <img class="umb-media-grid__item-image-placeholder" ng-if="!item.thumbnail && item.extension != 'svg'" src="assets/img/transparent.png" alt="{{item.name}}" draggable="false" />
 
+            <!-- Icon for files -->
             <i class="umb-media-grid__item-icon {{item.icon}}" ng-if="!item.thumbnail && item.extension != 'svg'"></i>
 
         </div>