problem with assigning value to media picker 3 programmatically

Pavle Ćurčić 3 posts 85 karma points c-trib

Jun 11, 2021 @ 12:07

Using Umbraco And Getting Started

Umbraco 8

I understand that since the last update Media Picker became kind of deprecated with the 8.14 update (I cannot add a Media Picker property at all).

I've tried adding value to Media Picker 3 but I cannot manage. I can't seem to find official documentation and explanation on how to add value.

Tried using what I found on the documentation page for Media Picker is something like this:

@{
// Get access to ContentService
var contentService = Services.ContentService;

// Create a variable for the GUID of the page you want to update
var guid = Guid.Parse("32e60db4-1283-4caa-9645-f2153f9888ef");

// Get the page using the GUID you've defined
var content = contentService.GetById(guid); // ID of your page

// Get the media you want to assign to the media picker 
var media = Umbraco.Media("bca8d5fa-de0a-4f2b-9520-02118d8329a8");

// Create an Udi of the media
var udi = Udi.Create(Constants.UdiEntityType.Media, media.Key);

// Set the value of the property with alias 'featuredBanner'. 
content.SetValue("featuredBanner", udi.ToString());

// Save the change
contentService.Save(content);
}

Basically, the point is to assign UDI as the value. I've tried adding UDI string and even as an object UDI and none of that works. Here's the sequence:

enter image description here

As stated before saving ID is equal to 0, which means that is not added to the database. Also, the value of the property is added. So there are no problems there. After the save method executes the content has an ID which means it has been added to the database

enter image description here

The exception that gets thrown is this:

enter image description here

Now I managed to get around this by using property type multi Url picker, but this is not ideal as it makes the code in the template really complicated.

Can someone point me in the right direction?

Thanks!

Copy Link

Marc Goodson 2141 posts 14344 karma points MVP 8x c-trib

Jun 13, 2021 @ 07:37

Hi Payle

Firstly you can enable Media Picker V2 again, there is a setting in /config/umbracosettings.config that you can update/add

<showDeprecatedPropertyEditors>true</showDeprecatedPropertyEditors>

Restart your site and you will be able to use V2 in the same way as before...

but I don't want to use an obsolete thing, I'll only have to upgrade later!! I hear you say...

well the the good news is the v2 version of the MediaPicker will be enabled and unobsoleted 'by default' in 8.14.1

https://github.com/umbraco/Umbraco-CMS/issues/10423

If you want to plough ahead with V3 and setting it programatically then it does appear that hasn't been documented yet.

The technique would be the same as for V2 but instead of setting the Udi or list of Uids for Umbraco to store in the editor, there is a new JSON format that needs to be stored for each property, so you'd build the JSON up in your code and set it where you would have set the Udi value...

The structure of the JSON that gets stored for each picked Media Item maps to this c# object in the core:

https://github.com/umbraco/Umbraco-CMS/blob/809fd819821770472dec3eb2d7241f7d39f3c918/src/Umbraco.Web/PropertyEditors/ValueConverters/MediaPickerWithCropsValueConverter.cs#L103

So will be similar to the example for setting 'nested content' programmatically:

https://our.umbraco.com/Documentation/Fundamentals/Backoffice/Property-Editors/Built-in-Property-Editors/Nested-Content/#creating-nested-content-programmatically

but with the properties matching the definition of above.

If you get it working we should update the docs with your example!

regards

Marc

Copy Link

Pavle Ćurčić 3 posts 85 karma points c-trib

Jun 14, 2021 @ 10:31

Hey, it worked!

This is the code that did the job for me:

var otherPicDictornary = new List<Dictionary<string, string>>();
            foreach (var img in article.Image)
            {
                MediaWithCropsDto mediaWithCrops = new MediaWithCropsDto();
                if (img.IsFirstImage)
                {
                    var media = mediaService.GetById(img.FileInfo.UmbracoId);

                    var dictionary = new List<Dictionary<string, string>>
                    {
                        new Dictionary<string, string>()
                    {
                        { "key", Guid.NewGuid().ToString() },
                        { "mediaKey", media.Key.ToString() },
                        { "crops", null },
                        { "focalPoint", null }
                    }
                    };

                    var json = JsonConvert.SerializeObject(dictionary);
                    content.SetValue("firstPic", json);
                }
                else
                {
                    var media = mediaService.GetById(img.FileInfo.UmbracoId);
                    otherPicDictornary.Add(new Dictionary<string, string>
                    {
                        { "key", Guid.NewGuid().ToString() },
                        { "mediaKey", media.Key.ToString() },
                        { "crops", null },
                        { "focalPoint", null }
                    });
                }
            }

            var jsonOtherPic = JsonConvert.SerializeObject(otherPicDictornary);
            content.SetValue("otherPics", jsonOtherPic);

I was getting an exception when I was trying to serialize a single instance of Dictionary. This was the exception that I was getting: enter image description here