Copied to clipboard

Flag this post as spam?

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


  • Lars Heesakkers 37 posts 193 karma points
    Mar 12, 2019 @ 09:07
    Lars Heesakkers
    0

    editorService.mediapicker in angular

    I am trying to convert a create an Umbraco 8 application based on a Umbraco 7 implementation. In this application we added a grid-layout in which we added custom row settings. In the Umbraco7 application, we used the dialogService in angular to call .mediaPicker, which opened a dialog in which we could add an image. However the dialogService in Umbraco8 does not exist. With some Github-searching I found out that the mediaPicker is now in the editorService. But when I use that one, the dialog opens as expected and my Media-folder is visible but when I click an image and try to save it, the buttons are not responding.

    here is a gif of what happens: enter image description here

    my html:

    <div class="oj-mediapicker">
    <umb-control-group label="Allow image to be zoomable">
        <umb-toggle checked="value.zoomable"
                    on-click="value.zoomable = !value.zoomable" />
    </umb-control-group>
    
    <div class="umb-editor-placeholder ng-scope" ng-click="addImage()" ng-show="hasImage()">
        <img src="{{value.image}}" alt="{{value.alt}}" />
    </div>
    
    <div class="umb-editor-placeholder ng-scope" ng-click="addImage()" ng-show="!hasImage()">
        <i class="icon icon-picture"></i>
        <div class="help-text">Click to insert image</div>
    </div>
    

    my directive.js addImage function:

    $scope.addImage = function (item) {
                console.log(item);
                editorService.mediaPicker({
                    onlyImages: true,
                    multiPicker: false,
                    callback: function (item) {
                        $scope.value = {
                            id: item.id,
                            icon: item.icon,
                            name: item.name,
                            image: item.image,
                            alt: getValueOf(item.properties, "Alt"),
                            zoomable: $scope.value.zoomable
                        };
                    }
                });
            };
    

    I could not find any documentation on this (as most of it is still using dialogService).

  • Andy Butland 422 posts 2334 karma points MVP 4x hq c-trib
    Mar 12, 2019 @ 10:06
    Andy Butland
    103

    I've - like you - been digging into the source to see how this is now working. Likely haven't got exactly what you need - this is for a content picker - but here's a little code sample from a package I'm looking to convert so it works both on V7 and V8, that might help. It might be that you need to define the submit callback function.

    var dialogOptions;
    if (dialogService) {
        // V7 - use dialogService
        dialogOptions = {
            multiPicker: true,
            entityType: "Document",
            filterCssClass: "not-allowed not-published",
            startNodeId: null,
            callback: function (data) {
                processSelections(data);
            },
            treeAlias: "content",
            section: "content"
        };
    
        dialogService.treePicker(dialogOptions);
    } else {
        // V8 - use editorService
        dialogOptions = {
            view: "views/common/infiniteeditors/treepicker/treepicker.html",
            size: "small",
            section: "content",
            treeAlias: "content",
            multiPicker: true,
            submit: function (data) {
                processSelections(data.selection);
                editorService.close();
            },
            close: function () {
                editorService.close();
            }
        };
        editorService.contentPicker(dialogOptions);
    }
    

    Andy

  • Lars Heesakkers 37 posts 193 karma points
    Mar 12, 2019 @ 10:44
    Lars Heesakkers
    0

    Hi Andy,

    This worked partially for me indeed. The problem now is now that, as you see in the gif in my first post, two dialogs are shown on top of each other. When I call editorService.close(); both dialogs are closed. It seems to me that the mediaPicker-dialog replaces the one the grid-layout editor opens.

  • Andy Butland 422 posts 2334 karma points MVP 4x hq c-trib
    Mar 12, 2019 @ 10:54
    Andy Butland
    0

    Ah, yes, could be. I'm opening up as a second dialog too, opened from a property editor, and it seems to work as expected there. But perhaps there's something different about doing so from a grid editor.

  • Lars Heesakkers 37 posts 193 karma points
    Mar 12, 2019 @ 10:55
    Lars Heesakkers
    0

    Thanks Andy, I'll post another post on the forum for that question then!

Please Sign in or register to post replies

Write your reply to:

Draft