Copied to clipboard

Flag this post as spam?

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


  • Christian Haase 5 posts 96 karma points
    May 28, 2019 @ 08:54
    Christian Haase
    0

    Media picker in grid editor

    Hello.

    I can't seem to figure out how to add a media picker to my custom grid editor.

    I have a grid editor that takes a header, a description, and an optional background image. The header and the description works fine, but I can't seem to trigger the media picker from my angular controller.

    I've taken inspiration from this post, but getting the following error when opening the content node that includes this grid editor:

    Request error: The URL returned a 404 (not found): views/common/overlays/mediapicker/mediapicker.html

    Has this changed in version 8 of Umbraco, or have I misunderstood something?

  • Christian Haase 5 posts 96 karma points
    May 28, 2019 @ 18:21
    Christian Haase
    101

    Found the solution myself. It appears you need to inject the editorService service.

    The media picker can be triggered with the following function:

    $scope.showMediaPicker = function () {
        var mediaPickerOptions = {
            multiPicker: false,
            show: false,
            submit: function (model) {
                var data = model.selection[0];
                setImage(data)
                editorService.close();
            },
            close: function () {
                editorService.close();
            }
        }
    
        editorService.mediaPicker(mediaPickerOptions);
    }
    

    As well as handling the media picker submit to set the image:

    function setImage(image) {
        if (!image) {
            $scope.control.value.imageId = 0;
            $scope.image = null;
            $scope.imageUrl = null;
            return;
        }
        $scope.control.value.imageId = image.id;
        $scope.image = image;
        $scope.imageUrl = (image.image ? image.image : mediaHelper.resolveFileFromEntity(image)) + '?width=' + 500 + '&mode=crop';
    }
    
  • lori ryan 63 posts 246 karma points
    4 days ago
    lori ryan
    0

    Any chance you have sample code on Github??

Please Sign in or register to post replies

Write your reply to:

Draft