I was using a grid editor plugin (basically a custom mediapicker) which worked fine in Umbraco v7, but fails to do so in Umbraco v8.

If someone could point me in the right direction to get it to work in V8 that would be much appreciated.

cshtml

    @inherits Umbraco.Web.Mvc.UmbracoViewPage<dynamic>
    @{
        var page = string.Empty;

        if (!string.IsNullOrEmpty((string)Model.link))
        {
            page = Umbraco.Content((string)Model.link).Url;
        }
    }

    @if (Model.image != null)
    {
        var urlImage = Umbraco.Content((string)Model.image).Url;

        <div class="cntr-image">
            @if (!string.IsNullOrEmpty(page) ^ (Model.alternativeLink != null && !string.IsNullOrWhiteSpace(Model.alternativeLink.ToString())))
            {
                <a href="@(string.IsNullOrEmpty(page) ? Model.alternativeLink : page)">
                    <div class="title"><h3>@Model.textOnImage</h3></div>
                    <div class="image"><img data-src="@urlImage" src="@urlImage?width=22&blur=99&sigma=5&threshold=99" alt="@Model.textOnImage"></div>
                </a>
            }
            else
            {
                <div class="title"><h3>@Model.textOnImage</h3></div>
                <div class="image"><img data-src="@urlImage" src="@urlImage?width=22&blur=99&sigma=5&threshold=99" alt="@Model.textOnImage"></div>
            }
        </div>
    }

    <p>@Model.description</p>

html

 <div ng-controller="my.lucide.gridBlock">

        <div class="umb-editor-placeholder ng-scope" ng-click="setBlock()" ng-if="control.value === null">
            <i class="icon icon-firewall"></i>
            <div class="help-text">Click to add a block</div>
        </div>

        <div class="visual-lucide-block" ng-click="setBlock()" ng-if="control.value !== null">

            <div class="col-xs-12 col-sm-4">
                <div class="cntr-image">
                    <a>
                        <div class="title"><h3>{{control.textOnImage}}</h3></div>
                        <div class="image"><img data-for="des-{{id}}" ng-src="{{control.image.split('?')[0]}}" alt=""></div>
                    </a>
                </div>
                <p>{{control.description}}</p>
            </div>

            <div style="display: none">
                <div class="controls" id="alt-{{id}}">
                    <umb-editor model="image"></umb-editor>
                </div>
            </div>

        </div>

        <div class="umb-overlay umb-overlay-right" on-outside-click="closeOverLay()" ng-if="blockPickerOverlay.show" position="right" style="width: 520px;">
            <div class="umb-overlay-header">
                <h4 class="umb-overlay__title ng-binding">Create block</h4>
                <p class="umb-overlay__subtitle ng-binding">&nbsp;</p>
            </div>

            <div class="umb-overlay-container form-horizontal lucideBlock" style="overflow-y: auto; max-height: 500px">

                <div class="control-group umb-control-group">
                    <div class="umb-el-wrap">
                        <label class="control-label">Link of image</label>
                        <div class="controls" id="cnt-{{id}}">
                            <umb-editor model="image"></umb-editor>
                        </div>
                    </div>
                </div>

                <div class="control-group umb-control-group">
                    <div class="umb-el-wrap">
                        <label class="control-label">Text on image</label>
                        <div class="controls">
                            <input type="text" class="umb-editor umb-textstring textstring" ng-model="control.textOnImage" />
                        </div>
                    </div>
                </div>

                <div class="control-group umb-control-group">
                    <div class="umb-el-wrap">
                        <label class="control-label">Description</label>
                        <div class="controls">
                            <textarea class="umb-editor umb-textarea textstring" ng-model="control.description" rows="8"></textarea>
                        </div>
                    </div>
                </div>

                <div class="control-group umb-control-group">
                    <div class="umb-el-wrap">
                        <label class="control-label">Link</label>
                        <div class="controls">
                            <umb-editor model="link"></umb-editor>
                        </div>
                    </div>
                </div>

                <div class="control-group umb-control-group">
                    <div class="umb-el-wrap">
                        <label class="control-label">Alternatieve link</label>
                        <div class="controls">
                            <input type="text" class="umb-editor umb-textstring textstring" ng-model="control.alternativeLink" />
                        </div>
                    </div>
                </div>

            </div>

            <div class="umb-overlay-drawer">

                <div class="umb-overlay-drawer__align-right ng-scope">


                        <button type="button" class="btn umb-button__button btn-link umb-button--" ng-click="closeOverLay()">
                            <span class="umb-button__content">
                                <span ng-if="!labelKey" class="ng-scope ng-binding">Close</span>
                            </span>
                        </button>

                        <button type="button" class="btn umb-button__button btn-success umb-button--" ng-click="closeOverLay()">
                            <span class="umb-button__content">
                                <span ng-if="!labelKey" class="ng-scope ng-binding">Submit</span>
                            </span>
                        </button>
                </div>

            </div>
        </div>



    </div>

    <script>
        var blocks = document.getElementsByClassName("lucideBlock"),
            h = parseInt(window.innerHeight) - 190 + "px";

        for (var i = blocks.length; i--;) {
            blocks[i].style.maxHeight = h;
            blocks[i].style.minHeight = h;
        }

    </script>

js

angular.module("umbraco").controller("my.lucide.gridBlock", function ($scope, $route, $http) {

    $scope.image = {
        view: 'mediapicker',
        config: {
            multiPicker: false,
            onlyImages: true,
            disableFolderSelect: true,
            startNodeId: null
        },
        value: $scope.control.image
    };

    $scope.id = Math.floor(Math.random() * 100000);

    $scope.link = {
        view: 'contentpicker',
        config: {},
        value: $scope.control.link
    };

    $scope.blockPickerOverlay = {
        show: false
    };

    $scope.closeOverLay = function () {
        $scope.blockPickerOverlay.show = false;
        $scope.control.value = {};
        $scope.control.image = $scope.image.value;
        $scope.control.link = $scope.link.value;


        setTimeout(function () {
            loadImage("alt");
        }, 1000);
    };

    $scope.setBlock = function () {
        $scope.blockPickerOverlay.show = true;
    };

    function loadImage(control, src) {

        if (src == null) {
            src = document.querySelector("#" + control + "-" + $scope.id + " img");
        }

        if (src != null) {
            document.querySelector('img[data-for="des-' + $scope.id + '"]').setAttribute("src", src.getAttribute("src"));
        }
    }

    setTimeout(function () {
        loadImage("alt");
    }, 1000);
});