Handle upload and image cropper clientside

app/Umbraco/Umbraco.Archetype/Archetype.Umbraco.csproj

@@ -234,6 +234,7 @@
     <Compile Include="Extensions\ArchetypeHelper.cs" />
     <Compile Include="Extensions\HtmlHelperExtensions.cs" />
     <Compile Include="Extensions\ArchetypePropertyModelExtensions.cs" />
+    <Compile Include="Extensions\PropertyEditorExtensions.cs" />
     <Compile Include="Extensions\StringExtensions.cs" />
     <Compile Include="Models\ArchetypeModel.cs" />
     <Compile Include="Models\ArchetypePreValue.cs" />

app/Umbraco/Umbraco.Archetype/Extensions/PropertyEditorExtensions.cs

@@ -0,0 +1,58 @@
+using System.Collections.Generic;
+using System.Linq;
+using Newtonsoft.Json;
+using Umbraco.Core.PropertyEditors;
+
+namespace Archetype.Extensions
+{
+	public static class PropertyEditorExtensions
+    {
+		/// <summary>
+		/// Formats the default prevalues for a property editor for use within an Archetype clientside context
+		/// </summary>
+		/// <param name="propertyEditor">The property editor</param>
+		/// <returns>The formatted default prevalues</returns>
+		public static IDictionary<string, object> DefaultPreValuesForArchetype(this PropertyEditor propertyEditor)
+        {
+			if (propertyEditor.DefaultPreValues == null || propertyEditor.DefaultPreValues.Any() == false)
+			{
+				return propertyEditor.DefaultPreValues;
+			}
+			var view = propertyEditor.ValueEditor.View.ToLowerInvariant();
+
+			// This is the extension point for default prevalues formatting, in case we need to handle any other
+			// property editors later on. It should be replaced with a switch statement by then, or maybe some fancy 
+			// auto discovery of formatters :)
+			if (view == "imagecropper")
+			{
+				propertyEditor.FormatImageCropperDefaultPreValuesForArchetype();
+			}
+			return propertyEditor.DefaultPreValues;
+        }
+
+		/// <summary>
+		/// Format the default prevalues of the image cropper property editor
+		/// </summary>
+		/// <param name="propertyEditor"></param>
+		/// <remarks>
+		/// In order for the image cropper to work clientside, we need to make sure it's default prevalue "focalpoint" is returned
+		/// as a JSON object and not as the string it's defined as on the image cropper property editor.
+		/// </remarks>
+		private static void FormatImageCropperDefaultPreValuesForArchetype(this PropertyEditor propertyEditor)
+		{
+			const string focalPointKey = "focalPoint";
+
+			if (propertyEditor.DefaultPreValues.ContainsKey(focalPointKey) == false || propertyEditor.DefaultPreValues[focalPointKey] == null)
+			{
+				return;
+			}
+			var focalPoint = propertyEditor.DefaultPreValues[focalPointKey].ToString();
+			if (string.IsNullOrEmpty(focalPoint))
+			{
+				return;
+			}
+			// translate the JSON string to a JSON object
+			propertyEditor.DefaultPreValues[focalPointKey] = JsonConvert.DeserializeObject(focalPoint);
+		}
+    }
+}

app/directives/archetypeproperty.js

@@ -143,6 +143,8 @@ angular.module("umbraco.directives").directive('archetypeProperty', function ($c
 
                     //some items need an alias
                     scope.model.alias = "archetype-property-" + propertyAlias;
+                    //some items also need an id (file upload for example)
+                    scope.model.id = propertyAlias;
 
                     //watch for changes since there is no two-way binding with the local model.value
                     scope.$watch('model.value', function (newValue, oldValue) {