Using the media picker in your custom Umbraco backoffice pages 1
I’ve extended the Custom sections/trees/Pages/Dialogs in Umbraco v7 example project with the use of a media picker. I’ll quickly outline the bits needed.
So first we need a place to store the media id, this will be on the person class
1 [DataMember(Name = "pictureId")] 2 public int PictureId { get; set; }
Then update the view to display a media picker (you have full control over this markup). Important bits here are the openMediaPicker call, the ng-if and the stuff between {{}}
1 <umb-control-group label="Picture" description="Person’s picture’"> 2 <ul class="unstyled list-icons" ng-if="node"> 3 <li> 4 <i class="icon icon-delete red hover-show pull-right" ng-click="removePicture()"></i> 5 6 <i class="icon {{node.icon}} hover-hide"></i> 7 {{node.name}} 8 </li> 9 </ul> 10 <ul class="unstyled list-icons"> 11 <li> 12 <i class="icon icon-add blue"></i> 13 <a href ng-click="openMediaPicker()" prevent-default> 14 Select 15 </a> 16 </li> 17 </ul> 18 </umb-control-group>
Now in the controller we need the openMediaPicker function (it’s using the dialogService here)
1 $scope.openMediaPicker = function() { 2 dialogService.mediaPicker({ callback: populatePicture }); 3 }
And the callback method being
1 function populatePicture(item) { 2 $scope.node = item; 3 $scope.person.pictureId = item.id; 4 }
So we set the pictureId property of the person to the id of the returned media entity. To display the node name and node icon we set a node property on the model.
To remove the selected media item
1 $scope.removePicture = function() { 2 $scope.node = undefined; 3 $scope.person.pictureId = 0; 4 }
So this will now work to select and remove an item but we also need to make sure that when the page loads the node property on the model is populated (making use of entityResource so make sure to inject that).
1 if ($scope.person.pictureId > 0){ 2 entityResource.getById($scope.person.pictureId, "Media").then(function (item) { 3 $scope.node = item; 4 }); 5 }
That’s it, complete example project is available at https://github.com/TimGeyssens/UmbracoAngularBackofficePages/