getting the media service in a content app

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

Keith Boynton 19 posts 61 karma points

Jun 25, 2020 @ 07:38
0

Getting the media service in a Content App
Hi,

I'm trying to get the media service from inside a content app in v8.6.1

I was hoping that it could be injected like this:
```
angular.module("umbraco")
    .controller("My.ContentApp", function ($scope, editorState, userService, contentResource, mediaService)
```
But mediaService just raises the following error:
```
Error: "[$injector:unpr] Unknown provider: mediaServiceProvider <- mediaService <- My.ContentApp
```
Does anyone know how I can get the media service injected?
Copy Link
Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Jun 25, 2020 @ 20:54
0
Hi Keith

I think it's because it's not called "mediaService" in the Umbraco frontend - It appears to be in the backend C# though - I think what you're looking for is the mediaResource

So your snippet should look like this
```
angular.module("umbraco")
    .controller("My.ContentApp", function ($scope, editorState, userService, contentResource, mediaResource)
```
I hope this helps!

/Jan
Copy Link
Keith Boynton 19 posts 61 karma points

Jun 26, 2020 @ 08:14

0

Thank you Jan, that's really helpful, I did find this...

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

That seems to list the services that are available in the UI, however I didn't find anything in that list that looked like it would provide what I needed.

I'll give your suggestion a spin though, thank you!

Copy Link
Keith Boynton 19 posts 61 karma points

Jun 26, 2020 @ 15:49
0
So I gave your suggestion a spin and actually the mediaResource you mentioned is listed in that doc.. shame on me for missing it :)

However, I'm still being an idiot and not able to work out how to display a media image in a content app.

I have a media picker property, from which I can get the media path:

properties[3].value gives me:
```
umb://media/e40086a316bc4a3e8ef8ba42764ee397
```
I can't seem to get the id of the referenced media so I can't use:
```
 mediaResource.getById()
```
and there doesn't seem to be a getByPath()

I'm trying to get the media item url so I can display it like this:
```
 <img ng-src="{{vm.CoverArt}}" />
```
Copy Link

Bo Jacobsen 606 posts 2404 karma points

Jun 26, 2020 @ 17:55

Hi Keith.

With Udi i think you need to use the entityResource like

entityResource.getById(umb://media/e40086a316bc4a3e8ef8ba42764ee397, "Media")
   .then(function(ent) {
       var myDoc = ent;
       alert('its here!');
   });

Copy Link

Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Jun 26, 2020 @ 18:36

100

Hi Keith

It's a bit weird but you should be able to pass the udi to the mediaResource.getById(), which is not very obvious - But it should work.

I hope this helps.

/Jan

Copy Link
Keith Boynton 19 posts 61 karma points

Jun 27, 2020 @ 06:25

0

@bo Thank you for that suggestion.. it does work however that only returns a basic object and there aren't any really useful properties on it for my needs at least.

@Jan You're right! That does work indeed and I get the media object with everything I need. There's a property called mediaLink on the returned object (not url as I was expecting) that gives me a working link for the media.

Thank you very much!

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?