Hi Julien,

You can use the mediaResource resource in Angular:

https://our.umbraco.com/apidocs/v8/ui/#/api/umbraco.resources.mediaResource

Usage is something like:

    mediaResource.getById("umb://media/b76ddb4ee603401499066087984740ec")
        .then(function (media) {
            console.log(media);
        });

Hi again,

I'm not sure how much code you have now, but to hook up your view with some JavaScript, you can create an Angular controller. It could look like this:

angular.module("umbraco").controller("myController", function ($scope, mediaResource) {

    $scope.image = null;

    mediaResource.getById("umb://media/b76ddb4ee603401499066087984740ec")
        .then(function (media) {
            console.log(media);
            $scope.image = media;
        });

});

The JavaScript file should be registered in Umbraco - you can read more about that here:

https://our.umbraco.com/Documentation/Extending/Property-Editors/package-manifest

And then you can replace <div class="hero-video"> with <div class="hero-video" ng-controller="myController">. This ensures that your view is using your new controller.

When the image/media has been loaded, the URL is available in your view via $scope.image.mediaLink.

So far i have a image working but how to send the value to the controller

Hello Julien.

This is a sample code to add the image URL and observe the image changes:

(function () {
angular.module('umbraco')
    .controller("Custom.BlockList.Controller", function ($scope, mediaResource) {
    })
    .directive("blockListImage", ["mediaResource", function (mediaResource) {
        var config = { attributes: !0 };

        function reloadSrc(elem) {
            if (!elem) {
                return;
            }

            var src = elem.getAttribute("data-source");
            if (!src || !/\S/.test(src)) {
                elem.setAttribute("src", "");
                return;
            }

            mediaResource.getById(src)
                .then(function (media) {
                    elem.setAttribute("src", media.mediaLink);
                });
        }

        function obsCb(mutations) {
            mutations.forEach(function (mutation) {
                if (mutation.type === "attributes" && mutation.attributeName === "data-source") {
                    reloadSrc(mutation.target);
                }
            });
        }
        const observer = new MutationObserver(obsCb);
        function link(scope, elem, attrs) {
            var element = elem[0];
            observer.observe(element, config);              
        }

        return {
            link: link
        };
    }]);
})();

And on your custom HTML:

<ng-controller ng-controller="Custom.BlockList.Controller">
<button type="button" ng-click="block.edit()">
    <img block-list-image data-source="{{block.data.image}}" />
</button></ng-controller>

I'm using a directive to get the image source on the element attribute, then I use mediaResouce service to get the media and set the src to the element.

This works on my side. Hope this helps you too.

Thank you for the answer well i got it working by doing this.

angular.module("umbraco").controller("myController", function ($scope, mediaResource) {

$scope.video = null;
mediaResource.getById($scope.$parent.$parent.block.data.heroImage)
    .then(function (media) {
        $scope.video = media;
    });

});

this is not perfect for now it is enough. But when i want a second image to get i can not use the getbyId method. Something with Same action twice.

how can i fix that?

Multiple actions were found that match the request: GetById on type

Is there any good content for the old angular a course something i can follow? would make much easier i guess

Hello Julien,

Sorry, but I can't figure out the issue with that. Can you post the full code of both the controller and the HTML of the view?

IMO, it's not ideal to use the media resource in the controller especially in case your view needs to display multiple media sources (multimedia picker for example) because you will need to duplicate the "mediaResource.getById" for each media.

By adding a directive to the DOM element, you can modify it the DOM element anyhow you want and you can reuse your directive on other elements too.

AngularJS document can be found at: https://docs.angularjs.org/guide/

Hi @Gii,

Thank you for your help i know it is not the best option. As long as i have only one Block List Components it works fine.

As soon as i add a second component a other component

Header.html

<div class="hero-video" ng-controller="myController">
    <video poster="{{video.mediaLink}}" id="bgvid" playsinline autoplay muted loop>
        <source src="{{video.mediaLink}}" type="video/mp4">
    </video>
</div>

Highlight.html

<div class="column is-two-fifths" ng-controller="myController2">
            <figure class="image is-square">
                <img src="/images/placeholders/350x350.png">
            </figure>
        </div>

Then i have two controllers

angular.module("umbraco").controller("myController", function ($scope, mediaResource) {

$scope.video = null;
mediaResource.getById($scope.$parent.$parent.block.data.heroImage)
    .then(function (media) {
        $scope.video = media;
    });

  });

and i have a second controller.

angular.module("umbraco").controller("myController2", function ($scope, mediaResource) {

$scope.highlight= null;
mediaResource.getById($scope.$parent.$parent.block.data.image)
    .then(function (media) {
        $scope.highlight= media;
    });

});

Results: Multiple actions were found that match the request: GetById on type

Thank you for your help

Hello @Julien,

Sorry for the late response. I was busy so I didn't have the time to check and response.

I'm confused about why did you need to use $scope.$parent.$parent to get the block data.

I've tested with 2 controllers:

(function () {
angular.module('umbraco')
    .controller("Custom.BlockList.Controller1", function ($scope, mediaResource) {
        $scope.image = "";

        mediaResource.getById($scope.block.data.imageFirst)
            .then(function (media) {
                $scope.image = media.mediaLink;
            });
    });

angular.module('umbraco')
    .controller("Custom.BlockList.Controller2", function ($scope, mediaResource) {
        $scope.image = "";

        mediaResource.getById($scope.block.data.imageSecond)
            .then(function (media) {
                $scope.image = media.mediaLink;
            });
    });
})()

I can see that you're using the media object in the response instead of the mediaLink. Maybe that's the issue? This is the HTML markup that I used:

<button type="button" ng-click="block.edit()">
<ng-controller ng-controller="Custom.BlockList.Controller1">
    <span>Text 1</span>
    <img ng-src="{{image}}" />
</ng-controller>

<ng-controller ng-controller="Custom.BlockList.Controller2">
    <span>Text 2</span>
    <img ng-src="{{image}}" />
</ng-controller>
</button>

The images appear without any problem.

is working on a reply...