File Upload inclusion in Custom AEM Component for Remote Asset Selector

Hi ​@NageshRaja ,

In Adobe Experience Manager (AEM) Cloud Service, when using Remote Asset Selector, the selected asset is stored as a URN reference and not as a direct delivery URL. To render the image correctly in a custom component, you need to resolve that URN to a delivery URL.

key points:

1. URN Storage – Remote assets are stored in JCR as a URN (e.g., /urn:aaid:aem:...), not as a public image URL.

2. URL Resolution Required – The URN must be resolved to the Dynamic Media delivery URL before rendering.

3. Use Asset Delivery API / Service – Use the Dynamic Media or Asset Delivery service in backend (Sling Model/Java) to convert the URN into a delivery URL or custom domain URL.

4. Update Sling Model – In your Sling Model, read the fileReference (URN) and resolve it to the delivery URL, then expose that value to HTL.

5. HTL Rendering – Use the resolved delivery URL in HTL instead of directly printing the URN.

6. Best Practice – Follow the same approach used by Core Components (Image v3), which internally resolves the URN before rendering the image.

Conclusion:
The best approach is to resolve the URN using the Asset Delivery/Dynamic Media service in a Sling Model and then pass the delivery URL to HTL for rendering.

Thanks,
Vishal

HI ​@NageshRaja 

The behavior you see is expected:

• The fileReference for a remote asset is a URN (/urn:aaid:aem:...).
• That value is not a delivery URL; it has to be resolved either by:
  • the Core Image component logic, or
  • the AssetDelivery API with the correct options.

Your assetDelivery.getDeliveryURL(resource, options) call returns nothing because just putting "path" in a Map is not enough — the API expects specific option keys and values (delivery type, rendition/format, etc.) as described in the web‑optimized image API docs, not arbitrary keys. If those are missing or wrong, it will return null. https://experienceleague.adobe.com/en/docs/experience-manager-learn/cloud-service/developing/advanced/web-optimized-image-delivery-java-apis

Instead of resolving the URN yourself, delegate to the Core Image component, which already knows how to turn the URN into a proper Dynamic Media / custom-domain URL:

1. Make your custom component extend Image v3
   In your component definition: sling:resourceSuperType="core/wcm/components/image/v3/image"
2. In your Sling Model, delegate to the Core Image model

   @Self
   @Via(type = ResourceSuperType.class)
   private com.adobe.cq.wcm.core.components.models.Image coreImage;
   
   public String getDeliveryUrl() {
       return coreImage != null ? coreImage.getSrc() : null;
   }
   

3. In HTL, use the resolved URL

   <img src="${model.deliveryUrl}" alt="${coreImage.alt}"/>
   

   As long as remote assets + Dynamic Media OpenAPI are configured (ASSET_DELIVERY_REPOSITORY_ID, etc.), coreImage.getSrc() will output the final delivery URL or your custom domain URL, not the URN. https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/assets/dynamicmedia/dynamic-media-open-apis/integrate-remote-approved-assets-with-sites

Don't print the /urn:aaid:aem:... directly. For custom components, the simplest working solution is to extend Core Image v3 (sling:resourceSuperType="core/wcm/components/image/v3/image") and in your Sling Model delegate to the Core Image model and use image.getSrc() in HTL. That method already converts the URN from fileReference into the proper Dynamic Media / custom-domain delivery URL, so your <img> tag gets a usable URL instead of a URN.

​@NageshRaja Following up to see if this has been resolved. If you’ve found the answer—whether through the suggestions here or through your own troubleshooting—feel free to post the solution so others can benefit. If any reply helped along the way, marking it as accepted ensures the most useful information is easy to find. Thanks for helping close the loop!

Hey ​@NageshRaja 

This is a common challenge when integrating Remote Assets (Dynamic Media with Open APIs) into custom AEM components. The core issue is that the JCR stores a URN reference (

/urn:aaid:aem:...

), but you need to resolve it to an actual delivery URL.

Here's the recommended approach:

Use the 

AssetDelivery

 API (Sling Model)

AEM as a Cloud Service provides the 

com.adobe.cq.wcm.spi.AssetDelivery

 OSGi service specifically for resolving remote asset URNs to delivery URLs. You should create a Sling Model that uses this service.

1. Sling Model:

package com.adobe.aem.guides.wknd.core.models;

import com.adobe.cq.wcm.spi.AssetDelivery;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.injectorspecific.OSGiService;
import org.apache.sling.models.annotations.injectorspecific.ValueMapValue;

import javax.annotation.PostConstruct;
import java.util.HashMap;
import java.util.Map;

@Model(adaptables = SlingHttpServletRequest.class)
public class RemoteAssetModel {

    @OSGiService
    private AssetDelivery assetDelivery;

    @ValueMapValue(name = "fileReference", optional = true)
    private String fileReference;

    private String deliveryUrl;

    @PostConstruct
    protected void init() {
        if (fileReference != null && assetDelivery != null) {
            Map<String, Object> params = new HashMap<>();
            params.put("path", fileReference);
            params.put("format", "weboptimized");
// Add width/quality params as needed:
// params.put("width", 1280);
// params.put("quality", 85);
            deliveryUrl = assetDelivery.getDeliveryURL(null, params);
        }
    }

    public String getDeliveryUrl() {
        return deliveryUrl;
    }

    public String getFileReference() {
        return fileReference;
    }
}

Note: The exact 

AssetDelivery

 API signature may vary depending on your AEM SDK version. Check the latest Javadocs for 

com.adobe.cq.wcm.spi.AssetDelivery

 in your SDK.

2. HTL:

<sly data-sly-use.model="com.adobe.aem.guides.wknd.core.models.RemoteAssetModel" />
<sly data-sly-test="${model.deliveryUrl}">
    <img src="${model.deliveryUrl}" alt="" loading="lazy" />
</sly>

Alternative: NextGenDynamicMediaConfig

If 

AssetDelivery

 isn't available in your SDK version, you can resolve the URL manually by:

1. Reading the 

   NextGenDynamicMediaConfig

    OSGi configuration to get the delivery base URL (the 

   repositoryId

    maps to 

   https://<repositoryId>/adobe/dynamicmedia/deliver/

   )

2. Extracting the asset ID from the URN stored in 

   fileReference

3. Constructing the URL: 

   https://<delivery-host>/adobe/dynamicmedia/deliver/<asset-id>/<seo-name>?width=1280&quality=85

The URN format is typically 

/urn:aaid:aem:<uuid>/<filename>

, so you'd extract the UUID and filename to build the delivery URL.

Key Recommendations

• The 

  AssetDelivery

   API approach is preferred because it handles URL construction, CDN domain resolution, and any future format changes automatically.

• Make sure your AEM Cloud environment has Dynamic Media with Open APIs enabled and the remote assets repository is configured under Tools → Cloud Services → Dynamic Media.

• The Image v3 Core Component works because it already uses this same 

  AssetDelivery

   service internally — you're essentially replicating that pattern for your custom component.

• Consider extending or delegating to the Core Image component (

  core/wcm/components/image/v3/image

  ) via 

  sling:resourceSuperType

   if your custom component is primarily an image component, rather than reimplementing the delivery URL logic.