Fixed up the media uploader property editor so that it doesn't store any json, this leaves it as fully backwards compatible with 6.x < but also still allows us to upload multiple images if we want.

src/Umbraco.Web.UI.Client/src/common/mocks/umbraco.servervariables.js

@@ -15,7 +15,8 @@ Umbraco.Sys.ServerVariables = {
         "legacyTreeJs": "/belle/lib/yepnope/empty.js",
     },
     umbracoSettings: {
-        "umbracoPath": "/umbraco"    
+        "umbracoPath": "/umbraco",
+        "imageFileTypes": "jpeg,jpg,gif,bmp,png,tiff,tif"
     },
     isDebuggingEnabled: true
 };

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

@@ -208,15 +208,16 @@ function umbImageHelper() {
                     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) }];
-                }
 
+                //our default images might store one or many images (as csv)
+                var split = imageProp.value.split(',');
+                var self = this;
+                imageVal = _.map(split, function(item) {
+                    return { file: item, isImage: self.detectIfImageByExtension(item) };
+                });
+                
+                //for now we'll just return the first image in the collection.
+                //TODO: we should enable returning many to be displayed in the picker if the uploader supports many.
                 if (imageVal.length && imageVal.length > 0 && imageVal[0].isImage) {
                     return imageVal[0].file;
                 }
@@ -242,10 +243,8 @@ function umbImageHelper() {
         },
         detectIfImageByExtension: function(imagePath) {
             var lowered = imagePath;
-            if (lowered.endsWith(".jpg") || lowered.endsWith(".gif") || lowered.endsWith(".jpeg") || lowered.endsWith(".png")) {
-                return true;
-            }
-            return false;
+            var ext = lowered.substr(lowered.lastIndexOf(".") + 1);
+            return ("," + Umbraco.Sys.ServerVariables.umbracoSettings.imageFileTypes + ",").indexOf("," + ext + ",") !== -1;
         }
     };
 }

src/Umbraco.Web.UI.Client/src/less/modals.less

@@ -136,9 +136,9 @@
 	border:none;
 }
 
-.umb-modal .thumbnails > li:nth-child(2) {
+/*.umb-modal .thumbnails > li:nth-child(2) {
 	margin: 0 0 20px 0
-}
+}*/
 
 .umb-modal .thumbnails > li {
 	margin: 0 20px 20px 0;
@@ -146,7 +146,7 @@
 }
 
 .umb-modal .thumbnail img {
-	height: 120px
+	/*height: 100px;*/
 }
 
 .umb-modal .thumbnails .selected img, .umb-modal .thumbnails img:hover {
@@ -154,8 +154,8 @@
 }
 
 .umb-modal .thumbnails > li.folder {
-	width: 120px;
-	height: 120px;
+	width: 100px;
+	/*height: 100px;*/
 	display: block;
 	background: @grayLighter;
 	text-align: center;
@@ -165,12 +165,13 @@
 .umb-modal .thumbnails > li.folder .icon-folder-close {
 	color: @grayLight;
 	display: block;
-	font-size: 96px
+	font-size: 96px;
+    width:100px;
 }
 
 .umb-modal .thumbnails > li.folder a {
-	width: 120px;
-	height: 120px;
+	width: 100px;
+	height: 100px;
 	display: block
 }
 

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

@@ -20,28 +20,24 @@ function fileUploadController($scope, $element, $compile, umbImageHelper) {
 
     //clear the current files
     $scope.files = [];
+
     //create the property to show the list of files currently saved
     if ($scope.model.value != "") {
 
-        //for legacy data, this will not be an array, just a string so convert to an array
-        if (!$scope.model.value.startsWith('[')) {
-
-            //check if it ends with a common image extensions
-            var isImage = umbImageHelper.detectIfImageByExtension($scope.model.value);
-            $scope.model.value = "[{\"file\": \"" + $scope.model.value + "\",\"isImage\":" + isImage + "}]";
-        }
-
-        $scope.persistedFiles = angular.fromJson($scope.model.value);
+        var images = $scope.model.value.split(",");
+        
+        $scope.persistedFiles = _.map(images, function (item) {
+            return { file: item, isImage: umbImageHelper.detectIfImageByExtension(item) };
+        });
     }
     else {
         $scope.persistedFiles = [];
     }
-
+    
     _.each($scope.persistedFiles, function (file) {
         file.thumbnail = umbImageHelper.getThumbnailFromPath(file.file);
     });
-
-
+    
     $scope.clearFiles = false;
 
     //listen for clear files changes to set our model to be sent up to the server

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

@@ -2,12 +2,14 @@
     
     <div ng-hide="clearFiles">
         <div class="file-uploader">
-            <input type="file" umb-file-upload />
-        </div>        
+            <input type="file" umb-file-upload multiple />
+        </div>
+        <ul ng-show="files.length > 0">
+            <li ng-repeat="file in files">{{file.file.name}}</li>
+        </ul> 
     </div>
 
-    <div ng-show="persistedFiles.length > 0">
-        <p>Current files</p>
+    <div ng-show="persistedFiles.length > 0">        
         <ul class="thumbnails">
             <li class="thumbnail" ng-repeat="file in persistedFiles">
                 <div ng-switch on="file.isImage" >

src/Umbraco.Web.UI.Client/test/unit/common/services/umb-image-helper.spec.js

@@ -0,0 +1,38 @@
+describe('icon helper tests', function () {
+    var umbImageHelper;
+
+    beforeEach(module('umbraco.services'));
+    beforeEach(module('umbraco.mocks'));
+
+    beforeEach(inject(function ($injector) {
+        umbImageHelper = $injector.get('umbImageHelper');
+    }));
+
+    describe('basic utility methods return correct values', function () {
+
+        it('detects an image based file', function () {
+
+            var image1 = "a-jpeg.jpg";
+            var image2 = "a-png.png";
+            var image3 = "thisisagif.blah.gif";
+            var doc1 = "anormaldocument.doc";
+            
+            expect(umbImageHelper.detectIfImageByExtension(image1)).toBe(true);
+            expect(umbImageHelper.detectIfImageByExtension(image2)).toBe(true);
+            expect(umbImageHelper.detectIfImageByExtension(image3)).toBe(true);
+            expect(umbImageHelper.detectIfImageByExtension(doc1)).toBe(false);
+        });
+        
+        it('gets a thumbnail path', function () {
+            
+            var image1 = "a-jpeg.jpg";
+            var image2 = "a-png.png";
+            var image3 = "thisisagif.blah.gif";
+
+            expect(umbImageHelper.getThumbnailFromPath(image1)).toBe("a-jpeg_thumb.jpg");
+            expect(umbImageHelper.getThumbnailFromPath(image2)).toBe("a-png_thumb.jpg");
+            expect(umbImageHelper.getThumbnailFromPath(image3)).toBe("thisisagif.blah_thumb.jpg");
+        });
+        
+    });
+});