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 6 posts 98 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 6 posts 98 karma points
    May 28, 2019 @ 18:21
    Christian Haase
    102

    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 141 posts 448 karma points
    Jan 15, 2020 @ 08:32
    lori ryan
    0

    Any chance you have sample code on Github??

  • lori ryan 141 posts 448 karma points
    Jan 20, 2020 @ 12:17
    lori ryan
    0

    This answer really helped in me completing my custom grid editor. Please check out https://our.umbraco.com/forum/using-umbraco-and-getting-started/100699-media-picker-custom-grid-controls#comment-315807 for complete answer

Please Sign in or register to post replies

Write your reply to:

Draft