From 53891a69afe366668a80bb5f0761ea0d6b1bd70f Mon Sep 17 00:00:00 2001 From: Shannon Date: Tue, 23 Jul 2013 16:43:08 +1000 Subject: [PATCH] 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. --- .../common/mocks/umbraco.servervariables.js | 3 +- .../src/common/services/util.service.js | 23 ++++----- .../src/less/modals.less | 17 ++++--- .../fileupload/fileupload.controller.js | 20 +++----- .../fileupload/fileupload.html | 10 ++-- .../common/services/umb-image-helper.spec.js | 38 ++++++++++++++ src/Umbraco.Web.UI/Umbraco.Web.UI.csproj | 2 +- .../Editors/BackOfficeController.cs | 3 +- .../PropertyEditors/FileUploadValueEditor.cs | 50 +++++++------------ 9 files changed, 96 insertions(+), 70 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/test/unit/common/services/umb-image-helper.spec.js diff --git a/src/Umbraco.Web.UI.Client/src/common/mocks/umbraco.servervariables.js b/src/Umbraco.Web.UI.Client/src/common/mocks/umbraco.servervariables.js index bd8c505a3d..2a51738bbd 100644 --- a/src/Umbraco.Web.UI.Client/src/common/mocks/umbraco.servervariables.js +++ b/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 }; \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/common/services/util.service.js b/src/Umbraco.Web.UI.Client/src/common/services/util.service.js index b3713da0f6..51e3d9b748 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/util.service.js +++ b/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; } }; } diff --git a/src/Umbraco.Web.UI.Client/src/less/modals.less b/src/Umbraco.Web.UI.Client/src/less/modals.less index 152702b4d0..07149a27a5 100644 --- a/src/Umbraco.Web.UI.Client/src/less/modals.less +++ b/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 } 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 550336d28f..51b51de12d 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 @@ -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 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 1257abfa70..9cbbf816af 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 @@ -2,12 +2,14 @@
- -
+ +
+ -
-

Current files

+
  • diff --git a/src/Umbraco.Web.UI.Client/test/unit/common/services/umb-image-helper.spec.js b/src/Umbraco.Web.UI.Client/test/unit/common/services/umb-image-helper.spec.js new file mode 100644 index 0000000000..55325397ac --- /dev/null +++ b/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"); + }); + + }); +}); \ No newline at end of file diff --git a/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj b/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj index 66d25afd0a..9a8e3f7012 100644 --- a/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj +++ b/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj @@ -2599,7 +2599,7 @@ xcopy "$(ProjectDir)"..\packages\SqlServerCE.4.0.0.0\x86\*.* "$(TargetDir)x86\" True 6130 / - http://localhost:6130 + http://localhost:6230 False False diff --git a/src/Umbraco.Web/Editors/BackOfficeController.cs b/src/Umbraco.Web/Editors/BackOfficeController.cs index 7383d2b806..486b5f4035 100644 --- a/src/Umbraco.Web/Editors/BackOfficeController.cs +++ b/src/Umbraco.Web/Editors/BackOfficeController.cs @@ -66,7 +66,8 @@ namespace Umbraco.Web.Editors { "umbracoSettings", new Dictionary { - {"umbracoPath", GlobalSettings.Path} + {"umbracoPath", GlobalSettings.Path}, + {"imageFileTypes", UmbracoSettings.ImageFileTypes}, } }, { "isDebuggingEnabled", HttpContext.IsDebuggingEnabled } diff --git a/src/Umbraco.Web/PropertyEditors/FileUploadValueEditor.cs b/src/Umbraco.Web/PropertyEditors/FileUploadValueEditor.cs index fbdcfec45c..f1a0983e71 100644 --- a/src/Umbraco.Web/PropertyEditors/FileUploadValueEditor.cs +++ b/src/Umbraco.Web/PropertyEditors/FileUploadValueEditor.cs @@ -6,6 +6,7 @@ using System.Linq; using Newtonsoft.Json; using Newtonsoft.Json.Linq; using Umbraco.Core.IO; +using Umbraco.Core.Logging; using Umbraco.Core.Media; using Umbraco.Core.Models.Editors; using Umbraco.Core.PropertyEditors; @@ -45,32 +46,30 @@ namespace Umbraco.Web.PropertyEditors //check the editorValue value to see if we need to clear the files or not var clear = false; if (editorValue.Value.IsNullOrWhiteSpace() == false) - { - var parsed = JObject.Parse(editorValue.Value); - clear = parsed["clearFiles"].Value(); - } - - //parse the current value - var currentPersistedValues = new JArray(); - if (currentValue != null) { try { - currentPersistedValues = JArray.Parse(currentValue.ToString()); + var parsed = JObject.Parse(editorValue.Value); + clear = parsed["clearFiles"].Value(); } catch (JsonReaderException) { - //if we cannot parse, we'll ignore the error and start again, there must be a bad value stored for some reason + clear = false; } } - var newValue = new JArray(); + var currentPersistedValues = new string[] {}; + if (currentValue != null) + { + currentPersistedValues = currentValue.ToString().Split(new[] {','}, StringSplitOptions.RemoveEmptyEntries); + } + + var newValue = new List(); if (clear) { //TODO: Need to delete our old files! - - return newValue.ToString(Formatting.None); + return ""; } //check for any files @@ -87,8 +86,8 @@ namespace Umbraco.Web.PropertyEditors { var file = filesAsArray[i]; - var currentPersistedFile = currentPersistedValues.Count >= (i + 1) - ? currentPersistedValues[i]["file"].ToString() + var currentPersistedFile = currentPersistedValues.Length >= (i + 1) + ? currentPersistedValues[i] : ""; var name = IOHelper.SafeFileName(file.FileName.Substring(file.FileName.LastIndexOf(IOHelper.DirSepChar) + 1, file.FileName.Length - file.FileName.LastIndexOf(IOHelper.DirSepChar) - 1).ToLower()); @@ -110,18 +109,8 @@ namespace Umbraco.Web.PropertyEditors { var umbracoFile = UmbracoFile.Save(fileStream, fileName); - //create json to be saved - var forPersisting = JObject.FromObject(new - { - file = umbracoFile.Url, - isImage = false - }); - - if (umbracoFile.SupportsResizing) { - forPersisting["isImage"] = true; - // make default thumbnail umbracoFile.Resize(100, "thumb"); @@ -137,23 +126,22 @@ namespace Umbraco.Web.PropertyEditors } } } - - //add this to the persisted values - newValue.Add(forPersisting); + newValue.Add(umbracoFile.Url); } //now remove the temp file - File.Delete(file.TempFilePath); + File.Delete(file.TempFilePath); } - + //TODO: We need to remove any files that were previously persisted but are no longer persisted. FOr example, if we // uploaded 5 files before and then only uploaded 3, then the last two should be deleted. - return newValue.ToString(Formatting.None); + return string.Join(",", newValue); } } //if we've made it here, we had no files to save and we were not clearing anything so just persist the same value we had before return currentValue; } + } } \ No newline at end of file