Hi All, We're building up a simple custom property editor which is a media item with text and link.

The property editor is in a repeat so the user can add a number of them on the fly. It is a very simple implementation but we're having some niggly unexplained issues.

The controller is here:

angular.module("umbraco")
.controller("MediaWithLinkAndTextstring", function ($scope, dialogService) {
    function Item() {
        this.media = '';
        this.thumbnail = '';
        this.link = '';
        this.text = '';
    }

    $scope.model.value.items = $scope.model.value.items || [new Item()];

    $scope.addItem = function () {
        $scope.model.value.items.push(new Item());
    }

    $scope.removeItem = function (item) {
        $scope.model.value.items.splice($scope.model.value.items.indexOf(item), 1);
    }

    $scope.setMedia = function (item) {
        dialogService.mediaPicker({
            multiPicker: false,
            callback: function (data) {
                item.media = data.image;
                item.thumbnail = data.thumbnail;
            }
        });
    }
});

We're basically building up an array of property editors but when we go to save and publish we're getting a 500. "POST https://my.website.test/umbraco/backoffice/UmbracoApi/Content/PostSave 500 (Internal Server Error)"

Here's the html view:

<div data-ng-controller="MediaWithLinkAndTextstring" class="sot-custom-control">
<ul>
    <li data-ng-repeat="item in model.value.items" class="umb-mediapicker">
        <div class="block">
            <a data-ng-click="setMedia(item)" class="add-link" prevent-default="">
                <i data-ng-if="!item.thumbnail" class="icon icon-add large"></i>
                <img data-ng-if="item.thumbnail" data-ng-src="{{item.thumbnail}}" />
            </a>
        </div>
        <div class="block">
            <label>
                Link<br /><input data-ng-model="item.link" />
            </label>
            <label>
                Text<br /><input data-ng-model="item.text" />
            </label>
            <a class="btn btn-danger remove" data-ng-click="removeItem(item)">Remove</a>
        </div>
        <hr />
    </li>
</ul>
<a class="btn add" data-ng-click="addItem()">Add another</a>

We also found if you render a button control in the property editor and have any interaction with it for the AddItem method it would 500.. wrapping the addItem method in a span or any other tag fixed that issue.

I can't see how it would be a space issue or the like as the JSON blob shouldn't be too big. I was wondering if the multiple media properties were throwing it?

There is a close div in the view but the code editor on the forum seems to be eating it