merge

.gitignore

@@ -79,3 +79,4 @@ src/Umbraco.Web.UI.Client/build/*
 src/Umbraco.Web.UI.Client/build/*
 src/Umbraco.Web.UI.Client/build/belle/
 src/Umbraco.Web.UI/UserControls/
+build/_BuildOutput/

src/Umbraco.Web.UI.Client/build/belle/views/propertyeditors/umbraco/rte/rte.controller.js

@@ -1,6 +1,6 @@
 angular.module("umbraco")
     .controller("Umbraco.Editors.RTEController", 
-    function($rootScope, $scope, dialogService, $log){
+    function($rootScope, $scope, dialogService, $log, umbImageHelper){
     require(
         [
             'tinymce'
@@ -33,15 +33,11 @@ angular.module("umbraco")
                                     //really simple example on how to intergrate a service with tinyMCE
                                     $(data.selection).each(function (i, img) {
 
-                                        var imageProperty = _.find(img.properties, function(item) {
+                                        var imagePropVal = umbImageHelper.getImagePropertyVaue({imageModel: img, scope: $scope});
-                                            return item.alias == 'umbracoFile';
-                                        });
-
-                                        var imageData = $scope.$eval(imageProperty.value);
 
                                         var data = {
-                                            src: (imageData != null && imageData.length && imageData.length > 0)
+                                            src: (imagePropVal != null && imagePropVal != "")
-                                                ? imageData[0].file
+                                                ? imagePropVal
                                                 : "nothing.jpg",
                                             style: 'width: 100px; height: 100px',
                                             id: '__mcenew'

src/Umbraco.Web.UI.Client/src/common/services/utill.service.js

@@ -7,6 +7,31 @@
 **/
 function umbImageHelper() {
     return {
+        /** Returns the actual image path associated with the image property if there is one */
+        getImagePropertyVaue: function(options) {
+            if (!options && !options.imageModel && !options.scope) {
+                throw "The options objet does not contain the required parameters: imageModel, scope";
+            }
+            if (options.imageModel.contentTypeAlias.toLowerCase() == "image") {
+                var imageProp = _.find(options.imageModel.properties, function (item) {
+                    return item.alias == 'umbracoFile';
+                });
+                var imageVal;
+                //Legacy images will be saved as a string, not an array so we will convert the legacy values
+                // to our required structure.
+                if (imageProp.value.startsWith('[')) {
+                    imageVal = options.scope.$eval(imageProp.value);
+                }
+                else {
+                    imageVal = [{ file: imageProp.value, isImage: this.detectIfImageByExtension(imageProp.value) }];
+                }
+
+                if (imageVal.length && imageVal.length > 0 && imageVal[0].isImage) {
+                    return imageVal[0].file;
+                }
+            }
+            return "";
+        },
         /** formats the display model used to display the content to the model used to save the content */
         getThumbnail: function (options) {
             
@@ -14,20 +39,22 @@ function umbImageHelper() {
                 throw "The options objet does not contain the required parameters: imageModel, scope";
             }
 
-            if (options.imageModel.contentTypeAlias.toLowerCase() === "image") {
+            var imagePropVal = this.getImagePropertyVaue(options);
-                var imageProp = _.find(options.imageModel.properties, function (item) {
+            if (imagePropVal != "") {
-                    return item.alias === 'umbracoFile';
+                return this.getThumbnailFromPath(imagePropVal);
-                });
-                var imageVal = options.scope.$eval(imageProp.value);
-                if (imageVal.length && imageVal.length >0 && imageVal[0].isImage) {
-                    return this.getThumbnailFromPath(imageVal[0].file);
-                }
             }
             return "";
         },
         getThumbnailFromPath: function(imagePath) {
             var ext = imagePath.substr(imagePath.lastIndexOf('.'));
-            return imagePath.substr(0, imagePath.lastIndexOf('.')) + "_thumb" + ext;
+            return imagePath.substr(0, imagePath.lastIndexOf('.')) + "_thumb" + ".jpg";
+        },
+        detectIfImageByExtension: function(imagePath) {
+            var lowered = imagePath;
+            if (lowered.endsWith(".jpg") || lowered.endsWith(".gif") || lowered.endsWith(".jpeg") || lowered.endsWith(".png")) {
+                return true;
+            }
+            return false;
         }
     };
 }

src/Umbraco.Web.UI.Client/src/views/propertyeditors/umbraco/rte/rte.controller.js

@@ -1,6 +1,6 @@
 angular.module("umbraco")
     .controller("Umbraco.Editors.RTEController", 
-    function($rootScope, $scope, dialogService, $log){
+    function($rootScope, $scope, dialogService, $log, umbImageHelper){
     require(
         [
             'tinymce'
@@ -33,15 +33,11 @@ angular.module("umbraco")
                                     //really simple example on how to intergrate a service with tinyMCE
                                     $(data.selection).each(function (i, img) {
 
-                                        var imageProperty = _.find(img.properties, function(item) {
+                                        var imagePropVal = umbImageHelper.getImagePropertyVaue({imageModel: img, scope: $scope});
-                                            return item.alias == 'umbracoFile';
-                                        });
-
-                                        var imageData = $scope.$eval(imageProperty.value);
 
                                         var data = {
-                                            src: (imageData != null && imageData.length && imageData.length > 0)
+                                            src: (imagePropVal != null && imagePropVal != "")
-                                                ? imageData[0].file
+                                                ? imagePropVal
                                                 : "nothing.jpg",
                                             style: 'width: 100px; height: 100px',
                                             id: '__mcenew'

src/Umbraco.Web.UI/App_Plugins/MyPackage/PropertyEditors/Js/FileUploadEditor.js

@@ -25,11 +25,7 @@ define(['namespaceMgr'], function () {
             if (!$scope.model.value.startsWith('[')) {
                 
                 //check if it ends with a common image extensions
-                var lowered = $scope.model.value.toLowerCase();
+                var isImage = umbImageHelper.detectIfImageByExtension($scope.model.value);                
-                var isImage = false;
-                if (lowered.endsWith(".jpg") || lowered.endsWith(".gif") || lowered.endsWith(".jpeg") || lowered.endsWith(".png")) {
-                    isImage = true;
-                }
                 $scope.model.value = "[{\"file\": \"" + $scope.model.value + "\",\"isImage\":" + isImage +"}]";
             }
 
@@ -39,9 +35,10 @@ define(['namespaceMgr'], function () {
             $scope.persistedFiles = [];
         }
 
-        $scope.getThumbnail = function (file) {
+        _.each($scope.persistedFiles, function(file) {
-            return umbImageHelper.getThumbnailFromPath(file.file);            
+            file.thumbnail = umbImageHelper.getThumbnailFromPath(file.file);
-        };
+        });
+        
 
         $scope.clearFiles = false;
 

src/Umbraco.Web.UI/App_Plugins/MyPackage/PropertyEditors/Views/FileUploadEditor.html

@@ -14,7 +14,7 @@
         <ul class="thumbnails">
             <li class="thumbnail" ng-repeat="file in persistedFiles">
                 <div ng-switch on="file.isImage" >
-                    <img ng-src="{{getThumbnail(file)}}" ng-switch-when="true" alt="{{file.file}}"/>
+                    <img ng-src="{{file.thumbnail}}" ng-switch-when="true" alt="{{file.file}}"/>
                     <span ng-switch-default>{{file.file}}</span>
                 </div>                
             </li>