nullreference from media picker

Henrik Vincent 122 posts 616 karma points

Apr 03, 2019 @ 08:44

Hi guys

I'm starting to lose it, so I hope you can help me out.

I'm making a subpage on a site, where I'm listing all employees in the company.

But I keep getting a NullReference on the media picker.

My doctype: enter image description here

And the 2 views I tested:

1:

@inherits Umbraco.Web.Mvc.UmbracoViewPage<Medarbejdere>
@using ContentModels = Umbraco.Web.PublishedModels;

<ul id="staffMembers">
    @foreach (ContentModels.Medarbejder m in Model.Children)
    {
    var image = m.Value<IPublishedContent>("staffImg");
    <li class="memberWrap">
        <div class="staffWrapper">
            <div class="staffImg">   
                <img src="@image.Url" />
            </div>
            <div class="staffOverlay" class="hidden">
                <div class="staffName">
                    @m.StaffName
                </div>
                <div class="staffTitle">
                    @m.Title
                </div>
                <div class="staffNumber">
                    <a href="tel:@m.Phone">@m.Phone</a>
                </div>
                <div class="staffButtons">
                    <a class="staffPhone" title="Ring til @m.StaffName på @m.Phone" href="tel:@m.Phone"><span class="fas fa-mobile-alt"></span></a>
                    <a class="staffMail" title="Skriv til @m.StaffName" href="mailto:@m.Mail&#64;kompetencekanalen.dk"><span class="far fa-envelope"></span></a>
                </div>
            </div>
            <em class="staffName">
                @m.StaffName
            </em>
            <div class="staffTitle">
                @m.Title
            </div>
        </div>
    </li>
    }
</ul>

2:

@inherits Umbraco.Web.Mvc.UmbracoViewPage<Medarbejdere>
@using ContentModels = Umbraco.Web.PublishedModels;

<ul id="staffMembers">
    @foreach (ContentModels.Medarbejder m in Model.Children)
    {
    <li class="memberWrap">
        <div class="staffWrapper">
            <div class="staffImg">   
                <img src="@m.StaffImg.Url" />
            </div>
            <div class="staffOverlay" class="hidden">
                <div class="staffName">
                    @m.StaffName
                </div>
                <div class="staffTitle">
                    @m.Title
                </div>
                <div class="staffNumber">
                    <a href="tel:@m.Phone">@m.Phone</a>
                </div>
                <div class="staffButtons">
                    <a class="staffPhone" title="Ring til @m.StaffName på @m.Phone" href="tel:@m.Phone"><span class="fas fa-mobile-alt"></span></a>
                    <a class="staffMail" title="Skriv til @m.StaffName" href="mailto:@m.Mail&#64;kompetencekanalen.dk"><span class="far fa-envelope"></span></a>
                </div>
            </div>
            <em class="staffName">
                @m.StaffName
            </em>
            <div class="staffTitle">
                @m.Title
            </div>
        </div>
    </li>
    }
</ul>

I've used the same approach for getting media several other places on the site, with no problems, but this one keeps giving me the NullReference.

The rest of the data get's added properly to the page, when removing the image.

Hope you guys have some suggestion on how o get this working.

Thank you in advance

Henrik

Copy Link

Rhys Hamilton 140 posts 942 karma points

Apr 03, 2019 @ 09:10

I’ve come across a null-exception in a few instances where either one or some of the children don’t have an image or the image no longer exists (i.e – it’s been deleted from media, but still referenced in the picker).

A quick check that I do, always renders a placeholder image when there’s isn’t one (is null).

var image = m.Value<IPublishedContent>("staffImg") == null ? "http://via.placeholder.com/150x150" : m.Value<IPublishedContent>("staffImg").Url;

<img src="@image" />

You should be able to quickly identify if there’s an issue with a particular child, without having to debug and step through your code.

Briefly as well, it might be worthwhile checking that your ModelsBuilders models are up-to-date (if you’re using dll mode).

Copy Link

Henrik Vincent 122 posts 616 karma points

Apr 03, 2019 @ 09:15

Thanks Rhys

I tried adding your suggestion, and all the images get the placeholder.

I tried removing the media picker prop and adding it again, but with the same result.

The media picker is mandatory, so I have images picked on all children.

What I did earlier, was removing all the images and moving them to a subfolder, to keep things organized, and the problem appeared after this.

But I tried adding the images again from the new location, but still getting the NullReference.

Edit: I'm using PureLive

Copy Link

Henrik Vincent 122 posts 616 karma points

Apr 03, 2019 @ 09:30

Okay.

So I tried editing a employee and then edit the image (the small pencil).

Resaved and saved and published, and now it's working.

Still dont get why it threw a nullreference, since I tried removing the media picker property and adding it again, forcing me to repick all images.

But hey.

It's working again (for now).

Thanks for your help :)

Edit: Adding Rhys' suggestion on refreshing the cache here, so noone will miss it.

Go to Settings > Published Status and Refresh

Copy Link

Rhys Hamilton 140 posts 942 karma points

Apr 03, 2019 @ 09:32

Seems like you were a step ahead here!

I'm glad you got this working. I think the point in my recent post was the case then - since re-saving / publishing would refresh things.

I’m wondering if Umbraco is still looking for the old reference (could be a caching issue)

Glad it's solved for you :)

Copy Link

Rhys Hamilton 140 posts 942 karma points

Apr 03, 2019 @ 09:30

Thanks for the update on this – so no surprises then that it’s definitely returning null. The “ removing all the images and moving them to a subfolder” seems like a key part to this, so I’m wondering if Umbraco is still looking for the old reference (could be a caching issue, but I’m not 100% sure) – so throws a null since it no longer exists.

What I’d suggest then is to try the refresh all of the cache settings within Umbraco (Settings > Published Status).

If that still doesn’t work, then you could add a breakpoint on your “image” variable and debug through your code to really get a more detailed view of what’s happening here.

Copy Link

Henrik Vincent 122 posts 616 karma points

Apr 03, 2019 @ 09:56

Yea Rhys. You're absolutely right.

I tried uploading a new image directly into the sub-folder, and adding it to an employee. And this worked straight away.

I then tried doing a full refresh of the cache settings and now they're working right off the bat.

Thanks alot for your help, and I'll be using that placeholder checker from now on.

Have a great day

Best

Henrik

Copy Link

Rhys Hamilton 140 posts 942 karma points

Apr 03, 2019 @ 10:39

Fantastic!

I'm glad everything is resolved now (be sure to mark the solution in this post so others can find it easily!).

And +1 for using the placeholder checker :)

Copy Link

is working on a reply...

Flag this post as spam?

NullReference from media picker