Gets the image cropper posting files correctly

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

@@ -33,9 +33,9 @@ function fileManager() {
                 throw "args.files must be an object";
             }
 
-            var culture = null;
-            if (args.culture) {
-                culture = args.culture;
+            //normalize to null
+            if (!args.culture) {
+                args.culture = null;
             }
 
             var metaData = [];
@@ -49,7 +49,7 @@ function fileManager() {
             });
             for (var i = 0; i < args.files.length; i++) {
                 //save the file object to the files collection
-                fileCollection.push({ alias: args.propertyAlias, file: args.files[i], culture: culture, metaData: metaData });
+                fileCollection.push({ alias: args.propertyAlias, file: args.files[i], culture: args.culture, metaData: metaData });
             }
         },
         

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

@@ -221,7 +221,8 @@ function umbRequestHelper($http, $q, umbDataFormatter, angularHelper, dialogServ
                     for (var f in args.files) {
                         //each item has a property alias and the file object, we'll ensure that the alias is suffixed to the key
                         // so we know which property it belongs to on the server side
-                        var fileKey = "file_" + args.files[f].alias + "_" + args.files[f].culture;
+                        var fileKey = "file_" + args.files[f].alias + "_" + (args.files[f].culture ? args.files[f].culture : "");
+
                         if (angular.isArray(args.files[f].metaData) && args.files[f].metaData.length > 0) {
                             fileKey += ("_" + args.files[f].metaData.join("_"));
                         }

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

@@ -14,6 +14,16 @@
         
         $scope.valueChanged = valueChanged;
 
+        //here we declare a special method which will be called whenever the value has changed from the server
+        $scope.model.onValueChanged = function (newVal, oldVal) {
+            //clear current uploaded files
+            fileManager.setFiles({
+                propertyAlias: $scope.model.alias,
+                culture: $scope.model.culture,
+                files: []
+            });
+        };
+
         /**
          * Called when the file selection value changes
          * @param {any} value

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

@@ -36,12 +36,18 @@ angular.module('umbraco')
         $scope.crop = function (crop) {
             $scope.currentCrop = crop;
             $scope.currentPoint = undefined;
+
+            //set form to dirty to track changes
+            $scope.imageCropperForm.$setDirty();
         };
 
         //done cropping
         $scope.done = function () {
             $scope.currentCrop = undefined;
             $scope.currentPoint = undefined;
+
+            //set form to dirty to track changes
+            $scope.imageCropperForm.$setDirty();
         };
 
         //crop a specific crop
@@ -49,6 +55,7 @@ angular.module('umbraco')
             //clear current uploaded files
             fileManager.setFiles({
                 propertyAlias: $scope.model.alias,
+                culture: $scope.model.culture,
                 files: []
             });
 
@@ -58,9 +65,8 @@ angular.module('umbraco')
                 delete $scope.model.value;
             }
 
-            // set form to dirty to tricker discard changes dialog
-            var currForm = angularHelper.getCurrentForm($scope);
-            currForm.$setDirty();
+            //set form to dirty to track changes
+            $scope.imageCropperForm.$setDirty();
         };
 
         //show previews
@@ -83,7 +89,11 @@ angular.module('umbraco')
 
             if (args.files && args.files[0]) {
 
-                fileManager.setFiles({ propertyAlias: $scope.model.alias, files: args.files});
+                fileManager.setFiles({
+                    propertyAlias: $scope.model.alias,
+                    culture: $scope.model.culture,
+                    files: args.files
+                });
 
                 var reader = new FileReader();
                 reader.onload = function (e) {
@@ -95,6 +105,9 @@ angular.module('umbraco')
                 };
 
                 reader.readAsDataURL(args.files[0]);
+
+                //set form to dirty to track changes
+                $scope.imageCropperForm.$setDirty();
             }
         });
 
@@ -102,7 +115,11 @@ angular.module('umbraco')
         //here we declare a special method which will be called whenever the value has changed from the server
         $scope.model.onValueChanged = function (newVal, oldVal) {
             //clear current uploaded files
-            fileManager.setFiles({ propertyAlias: $scope.model.alias, files: [] });
+            fileManager.setFiles({
+                propertyAlias: $scope.model.alias,
+                culture: $scope.model.culture,
+                files: []
+            });
         };
 
         var unsubscribe = $scope.$on("formSubmitting", function () {

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

@@ -1,72 +1,69 @@
 <div class="umb-property-editor umb-mediapicker"
      ng-controller="Umbraco.PropertyEditors.ImageCropperController">
 
+    <ng-form name="imageCropperForm">
+        <span class="fileinput-button umb-upload-button-big"
+              style="margin-bottom: 5px;"
+              ng-hide="imageSrc">
+            <i class="icon icon-page-up"></i>
+            <p><localize key="media_clickToUpload">Click to upload</localize></p>
+            <umb-single-file-upload></umb-single-file-upload>
+        </span>
 
-    <span class="fileinput-button umb-upload-button-big"
-          style="margin-bottom: 5px;"
-          ng-hide="imageSrc">
-        <i class="icon icon-page-up"></i>
-        <p><localize key="media_clickToUpload">Click to upload</localize></p>
-        <umb-single-file-upload></umb-single-file-upload>
-    </span>
+        <div ng-if="imageSrc">
 
+            <div class="imagecropper clearfix">
 
-    <div ng-if="imageSrc">
+                <div ng-if="currentCrop" style="float:left; max-width: 100%;" class="clearfix">
+                    <div class="umb-cropper__container">
 
+                        <i ng-click="done()" class="icon icon-delete btn-round umb-close-cropper"></i>
 
-        <div class="imagecropper clearfix">
+                        <div>
+                            <umb-image-crop height="{{currentCrop.height}}"
+                                            width="{{currentCrop.width}}"
+                                            crop="currentCrop.coordinates"
+                                            center="model.value.focalPoint"
+                                            max-size="450"
+                                            src="imageSrc">
+                            </umb-image-crop>
+                        </div>
 
-            <div ng-if="currentCrop" style="float:left; max-width: 100%;" class="clearfix">
-                <div class="umb-cropper__container">
-
-                    <i ng-click="done()" class="icon icon-delete btn-round umb-close-cropper"></i>
-
-                    <div>
-                        <umb-image-crop height="{{currentCrop.height}}"
-                                        width="{{currentCrop.width}}"
-                                        crop="currentCrop.coordinates"
-                                        center="model.value.focalPoint"
-                                        max-size="450"
-                                        src="imageSrc">
-                        </umb-image-crop>
+                        <a href style="margin:auto; text-align: center; font-size: 11px;" class="btn btn-link red"
+                           ng-click="currentCrop.coordinates = undefined; done()">
+                            <localize key="imagecropper_reset">Reset</localize>
+                        </a>
                     </div>
-
-                    <a href style="margin:auto; text-align: center; font-size: 11px;" class="btn btn-link red"
-                       ng-click="currentCrop.coordinates = undefined; done()">
-                        <localize key="imagecropper_reset">Reset</localize>
-                    </a>
                 </div>
+
+                <div ng-if="!currentCrop" class="umb-cropper-imageholder clearfix">
+                    <umb-image-gravity src="imageSrc"
+                                       center="model.value.focalPoint"
+                                       on-image-loaded="imageLoaded">
+                    </umb-image-gravity>
+                    <a href class="btn btn-link btn-crop-delete" ng-click="clear()"><i class="icon-delete red"></i> <localize key="content_uploadClear">Remove file</localize></a>
+                </div>
+
+                <ul class="umb-sortable-thumbnails cropList clearfix">
+                    <li ng-repeat=" (key,value) in model.value.crops" ng-class="{'current':currentCrop.alias === value.alias}" ng-click="crop(value)">
+
+                        <umb-image-thumbnail center="model.value.focalPoint"
+                                             crop="value.coordinates"
+                                             src="imageSrc"
+                                             height="{{value.height}}"
+                                             width="{{value.width}}"
+                                             max-size="75">
+                        </umb-image-thumbnail>
+
+                        <div class="crop-information">
+                            <span class="crop-name crop-text">{{value.alias}}</span>
+                            <span class="crop-size crop-text">{{value.width}}px x {{value.height}}px</span>
+                        </div>
+                    </li>
+                </ul>
+
             </div>
 
-            <div ng-if="!currentCrop" class="umb-cropper-imageholder clearfix">
-                <umb-image-gravity
-                    src="imageSrc"
-                    center="model.value.focalPoint"
-                    on-image-loaded="imageLoaded">
-                </umb-image-gravity>
-                <a href class="btn btn-link btn-crop-delete" ng-click="clear()"><i class="icon-delete red"></i> <localize key="content_uploadClear">Remove file</localize></a>
-            </div>
-
-            <ul class="umb-sortable-thumbnails cropList clearfix">
-                <li ng-repeat=" (key,value) in model.value.crops" ng-class="{'current':currentCrop.alias === value.alias}" ng-click="crop(value)">
-
-                    <umb-image-thumbnail center="model.value.focalPoint"
-                                         crop="value.coordinates"
-                                         src="imageSrc"
-                                         height="{{value.height}}"
-                                         width="{{value.width}}"
-                                         max-size="75">
-                     </umb-image-thumbnail>
-
-                    <div class="crop-information">
-                        <span class="crop-name crop-text">{{value.alias}}</span>
-                        <span class="crop-size crop-text">{{value.width}}px x {{value.height}}px</span>
-                    </div>
-                </li>
-            </ul>
-
-
         </div>
-
-    </div>
+    </ng-form>
 </div>