mediadialogue opening multiples times

Alex Brown 129 posts 620 karma points

Feb 22, 2018 @ 09:47

Extending Umbraco and using the API

Umbraco 7

Hi All

I'm using Umbraco 7.5.13 and I've come across an issue when creating a media picker in a custom section.

I've got multiple media picker links on a single page, and when I click each of these links it looks as though the media pickers are stacking on top of one another, rather than just opening a single one at a time. It's difficult to explain so I'll show some screenshots below and paste my code.

Select the first media picker link and it opens fine:

As you can see, it's fine.

Then I select the second link:

As you can see on the left side of the panel it looks as if it's overlayed

Finally here's the code:

        scope.mediaDialogue = function (subCategory) {
            scope.overlay = {
                currentTarget: null,
                onlyImages: false,
                showDetails: false,
                multiPicker: true,
                startNodeId: -1,
                disableFolderSelect: true,
                view: "mediapicker",
                show: true,
                submit: function (model) {
                    _.each(model.selectedImages, function (file) {
                          //fancy logic
                    });

                    scope.overlay.show = false;
                    scope.overlay = null;
                }
            };
        };

Any help would be appreciated!

Copy Link

Alex Brown 129 posts 620 karma points

Feb 27, 2018 @ 09:00

I've been an idiot. I probably should have pasted more code in here to expand on what I was trying to explain.

Here's my view to expand on what my problem was:

<li ng-repeat="subCategory in category.Children track by $index" class="d-block">
    <a href="#" ng-click="vm.mediaDialogue(subCategory);" prevent-default class="d-inline">
       <localize key="general_add">Add</localize>
    </a>
    <umb-overlay ng-if="vm.overlay.show"
                 model="vm.overlay"
                 view="vm.overlay.view"
                 position="right">
    </umb-overlay>
</li>

Not sure if you can spot the mistake but I was calling a single global instance of "overlay". Since I'm looping through an ng-repeat, every time I pressed the Add button it would call all the vm.overlay's.

This had other knock-on effects such as providing the upload dialogue multiple times within the media dialogue.

Anyway I fixed this by attaching the overlay to the subCategory so its scope is unique to that object, rather than the global scope.

Modified HTML:

<umb-overlay ng-if="subCategory.overlay && subCategory.overlay.show"
            model="subCategory.overlay"
            view="subCategory.overlay.view"
            position="right">
</umb-overlay>

JS:

scope.mediaDialogue = function (subCategory) {
    subCategory.overlay = {
        title: "Select PDF",
        onlyImages: false,
        showDetails: false,
        multiPicker: true,
        startNodeId: -1,
        disableFolderSelect: true,
        view: "mediapicker",
        show: true,
        submit: function (model) {
             _.each(model.selectedImages, function (file) {
                 //Fancy stuff
              });

         subCategory.overlay.show = false;
          subCategory.overlay = null;
       }
  };

I've posted this just in-case someone else makes a rookie mistake like me.

Copy Link

is working on a reply...

Flag this post as spam?

MediaDialogue Opening Multiples Times