Hi guys,

I'm developing a new property editor that needs to have a facility to upload a single image file and allow the user to pick multiple points in the image and assign tags to them. It's a bit like the ImageCropper that allows you to choose a single focal point.

Anyway, I started by copying the source code of the ImageCropper (from Umbraco) and added in the added functionality to define multiple tags in the image.

Anyhow, the problem I am having is that when I save the contents of the property editor, the image is saved like this...

data:image/jpeg;base64,/9j/4UXZRXhpZgAASUkqAAgAAAAJABoBBQABAAAAegAAA...

...instead of the media file URL location. It appears the image never gets saved to the media library, like the ImageCropper does.

I assume this has something to do with the "registerFileResolver"; I don't think this is being called when the property data is saved.

Here is a snippet of the code from the controller...

angular.module("umbraco").controller("Semantic.MapAttractionPickerController", function ($scope, assetsService, editorState, attractionResource, fileManager, angularHelper, mediaHelper, umbRequestHelper) {

// Clear the image
$scope.clear = function (crop) {
    if (confirm("Are you sure you want to remove the map image?")) {
        // Clear current uploaded files
        fileManager.setFiles($scope.model.alias, []);

        // Clear the ui and model
        $scope.mapImageSrc = undefined;
        $scope.model.value.mapImageSrc = "";

        // Set form to dirty to trigger "discard changes" dialog
        var currForm = angularHelper.getCurrentForm($scope);
        currForm.$setDirty();
    }
};

// On image selected, update the cropper
$scope.$on("filesSelected", function (ev, args) {
    if (args.files && args.files[0]) {
        fileManager.setFiles($scope.model.alias, args.files);

        var reader = new FileReader();
        reader.onload = function (e) {
            $scope.$apply(function () {
                $scope.mapImageSrc = e.target.result;
                $scope.model.value.mapImageSrc = $scope.mapImageSrc;

                // Set form to dirty to trigger "discard changes" dialog
                var currForm = angularHelper.getCurrentForm($scope);
                currForm.$setDirty();
            });
        };

        reader.readAsDataURL(args.files[0]);
    }
});

// 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($scope.model.alias, []);
};
}).run(function (mediaHelper, umbRequestHelper) {
if (mediaHelper && mediaHelper.registerFileResolver) {
    //NOTE: The 'entity' can be either a normal media entity or an "entity" returned from the entityResource
    // they contain different data structures so if we need to query against it we need to be aware of this.
    mediaHelper.registerFileResolver("Umbraco.ImageCropper", function (property, entity, thumbnail) {
        if (property.value && property.value.src) {
            if (thumbnail === true) {
                return property.value.src + "?width=500&mode=max";
            } else {
                return property.value.src;
            }
            // This is a fallback in case the cropper has been asssigned a upload field
        }
        else if (angular.isString(property.value)) {
            if (thumbnail) {
                if (mediaHelper.detectIfImageByExtension(property.value)) {
                    var thumbnailUrl = umbRequestHelper.getApiUrl(
                        "imagesApiBaseUrl",
                        "GetBigThumbnail",
                        [{ originalImagePath: property.value }]);

                    return thumbnailUrl;
                }
                else {
                    return null;
                }
            }
            else {
                return property.value;
            }
        }
        return null;
    });
}
});

I tried changing "Umbraco.ImageCropper" to "Semantic.MapAttractionPicker" and also "Semantic.MapAttractionPickerController", but neither of these work either.

Any ideas what I might be doing wrong?

Many thanks in advance, Chris