Backoffice UI extensions for DAM-integration

[karl-sjogren]

So I've inherited a prototype of a DAM-integration that "works" by doing some really hacky DOM-manipulation in the backoffice to inject new buttons. I'll include the code below for reference. This if of course a really bad idea, but I really like how it works for the editors so I would like to propose a few new extension points so we can make this properly. I'm also open to discuss better places to extend this.

And just to clarify, we can't use images directly from the DAM on the website so we need to import them as images in Umbraco. This is also an optional DAM-integration so we want to upload regular images as well without having different image fields. The DAM is read only for the editor so uploading new images to the DAM isn't a goal. I would also like to avoid the editor needing to move away from the page they are working on to go to the Media panel to import the image and then go back.

So first off we have a button injected into the Image Picker dialog.

Having an extension point to add custom buttons here would allow us to open a dialog to show and import images from the DAM system. Currently when our dialog is done we return to the regular media picker dialog which is then refreshed to show our new images.

Then we have this rather ugly extension point for image uploads.

This one I could take or leave, it feels a bit weird and I would rather have an extension point in the media panel/section to add a custom button next to "Create" like there is for Users with the "Invite" button.

I would assume that this could be done using a entityCreateOptionAction extension, but according to the documentation that is only available for User for now, and I can't even get it working there (or maybe this isn't what I think it is).

As I said above I'm open to discussing other places to extend the backoffice for this, my main focus is to find a way that is easy for the editor to select an image from the DAM or upload an image the usual way.

Current hacky solution to extend media picker

This is the hackiest part of the code I inherited, but it was built more like a prototype or proof of concept (and it might even have been "vibe coded").

  private findMediaPickerModalInElement(element: Element): Element | null {
    // First check if this is the element we're looking for
    if (element.tagName.toLowerCase() === 'umb-media-picker-modal') {
      return element;
    }

    // Check shadow DOM first
    if (element.shadowRoot) {
      // Direct search in shadow DOM
      const directMatch = element.shadowRoot.querySelector('umb-media-picker-modal');
      if (directMatch) return directMatch;

      // Search through shadow DOM children
      for (const child of Array.from(element.shadowRoot.children)) {
        const found = this.findMediaPickerModalInElement(child);
        if (found) {
          return found;
        }

        // Special case for slots
        if (child.tagName.toLowerCase() === 'slot') {
          const slotChildren = (child as HTMLSlotElement).assignedElements();

          for (const slotChild of slotChildren) {
            const found = this.findMediaPickerModalInElement(slotChild);
            if (found) {
              return found;
            }
          }
        }
      }
    }

    // Check direct children in light DOM
    const directMatch = element.querySelector('umb-media-picker-modal');
    if (directMatch) {
      return directMatch;
    }

    // Then check all descendants recursively in light DOM
    for (const child of Array.from(element.children)) {
      const found = this.findMediaPickerModalInElement(child);
      if (found) {
        return found;
      }
    }

    return null;
  }

  private findMediaPickerModalInElement(element: Element): Element | null {
    // First check if this is the element we're looking for
    if (element.tagName.toLowerCase() === 'umb-media-picker-modal') {
      return element;
    }

    // Check shadow DOM first
    if (element.shadowRoot) {
      // Direct search in shadow DOM
      const directMatch = element.shadowRoot.querySelector('umb-media-picker-modal');
      if (directMatch) return directMatch;

      // Search through shadow DOM children
      for (const child of Array.from(element.shadowRoot.children)) {
        const found = this.findMediaPickerModalInElement(child);
        if (found) {
          return found;
        }

        // Special case for slots
        if (child.tagName.toLowerCase() === 'slot') {
          const slotChildren = (child as HTMLSlotElement).assignedElements();

          for (const slotChild of slotChildren) {
            const found = this.findMediaPickerModalInElement(slotChild);
            if (found) {
              return found;
            }
          }
        }
      }
    }

    // Check direct children in light DOM
    const directMatch = element.querySelector('umb-media-picker-modal');
    if (directMatch) {
      return directMatch;
    }

    // Then check all descendants recursively in light DOM
    for (const child of Array.from(element.children)) {
      const found = this.findMediaPickerModalInElement(child);
      if (found) {
        return found;
      }
    }

    return null;
  }

[skttl]

Maybe it could be solved by adding the ability to add workspace views to these dialogs?

I would like to extend the icon picker too, to be able to easily import icons from external sources like iconify.design.

Besides that, I would recommend you to watch Steve Temples Codegarden talk about revamping the media section: https://www.youtube.com/watch?v=ZJWSnKUdzL8

[karl-sjogren]

Steve Temple had a lot of good ideas, and if made properly extendable it could work wonders for my use case. It is a bit disheartening to hear about how much problems he had though.

But revamping the default media picker to something like that sounds like it would take quite some effort, and probably take a lot of planning so it wouldn't be done until Umbraco 18 or 19 even if prioritized. That is a bit to far into the future for my usage :)

I'm not sure how workspace views works, but they seem to be used for a very specific case so doing that would probably require the media picker dialog to contain a workspace as well?