Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

  • Tom 119 posts 447 karma points
    Aug 29, 2016 @ 08:58

    Get the new Media Picker via dialogService


    Is there any way to use dialogService.mediaPicker with the new mediapicker view that looks like this

    The view that the dialogService.mediaPicker uses now looks like this

    enter image description here

    Any suggestions?

  • S Rupa 8 posts 111 karma points
    Sep 25, 2016 @ 11:50
    S Rupa

    Not sure you found a way. After checking how Umbracian (Amazing people) do this,

    You can try this; This is what I did, In your image picker controller,

    scope.openMediaPicker = function () {
                       //dialogService.mediaPicker({ callback: populatePicture });
                       scope.mediaPickerOverlay = {
                           view: "mediapicker",
                           title: "Select Picture",
                           startNodeId: 0,
                           multiPicker: false, // adjust as per your requirement
                           onlyImages: true, // adjust as per your requirement
                           disableFolderSelect: true, // adjust as per your requirement
                           show: true,
                           submit: function (model) {
                             // add your logic here if you using more than on image, for me its just 1st selected image
                               populatePicture(model.selectedImages[0]); // you must have this function in your code to populate the image
                      = false;
                               scope.mediaPickerOverlay = null;

    and finally, add this to your media picker directive something like this;

    <div ng-if="!node"> 
    <a href="" ng-click="openMediaPicker()" prevent-default class="btn btn-info btn-mini">Select</a> </div> 
    <umb-overlay ng-if="" model="mediaPickerOverlay" position="right" view="mediaPickerOverlay.view"> 

    Hope this help.

  • Harvey 28 posts 122 karma points
    Nov 23, 2016 @ 09:31

    Thanks Suranga, that's really useful information.

    However, I got a couple of problems with your code:

    • I had to rename any of the scope to $scope
    • there is no populatePicture function so this just throws an error when this function is called

    I suppose the populatePicture function renders the image to the user. Do you know how to get this working?

  • Al Nicholl 15 posts 97 karma points
    Dec 22, 2016 @ 09:16
    Al Nicholl

    Hi Harvey,

    I've found the following code works for both single and multiple images:

    function populatePicture(data) {
       if (angular.isArray(data)) {
            _.each(data, function (item, i) {
        } else {

    My only problem is that when I select my images and click Select, the selected images aren't listed in the initial macro parameter panel. Instead I still see the blue plus icon with Add text.

    Selecting images No images listed The images have been selected because I can see their IDs in the RTE code view and they show up as selected when I reopen the macro.

    Is there some simple Angular code I might be missing? Any help appreciated.



  • Jeremias 53 posts 278 karma points
    Sep 04, 2019 @ 07:30

    I want to say thank you for this post! I also had to change scope to $scope - but So I could finish my task :)

Please Sign in or register to post replies

Write your reply to: