Sign in Register
Copied to clipboard

Flag this post as spam?

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


  • Tom 120 posts 448 karma points
    Aug 29, 2016 @ 08:58
    Tom
    0

    Get the new Media Picker via dialogService

    Hi,

    Is there any way to use dialogService.mediaPicker with the new mediapicker view that looks like this http://prntscr.com/cblo7m.

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

    enter image description here

    Any suggestions?

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

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

    https://github.com/umbraco/Umbraco-CMS/blob/6ad4390d20468d491fbf68e56a3a8acc549174ca/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.controller.js

    https://github.com/umbraco/Umbraco-CMS/blob/6ad4390d20468d491fbf68e56a3a8acc549174ca/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html

    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


                           scope.mediaPickerOverlay.show = 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="mediaPickerOverlay.show" model="mediaPickerOverlay" position="right" view="mediaPickerOverlay.view"> 
</umb-overlay>

    Hope this help.

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

    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?

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

    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) {
           $scope.add(item);
        });
    } else {
        $scope.clear();
        $scope.add(data);
    }
}

    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.

    Cheers,

    Al

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

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

    Copy Link

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies