Integrate AEM Content Advisor upload and destination selection into an Angular application

This article explains how to integrate AEM Content Advisor upload and destination selection features into an Angular application using UMD modules. It also explains how to reuse IMS authentication and provide destination folder selection. To fix this, use the UMD export of the assets-upload bundle, pass the IMS access token to the Upload MFE, and provide the selected folder path through targetUploadPath.

Description description

Environment

  • Adobe Experience Manager as a Cloud Service
  • Adobe Experience Manager Assets with Content Advisor
  • Custom Angular application using UMD modules

Symptoms

  • The @assets/upload package is not available in the public npm registry.
  • The integration requires reuse of an IMS authentication session.
  • The integration requires custom logic to select the destination folder.

Resolution resolution

Follow these steps to integrate Content Advisor upload and destination selection into your Angular application:

  1. Use the UMD export of the assets-upload bundle in your Angular application because the @assets/upload package is not available in the public npm registry.

  2. Reuse the IMS authentication session from the UMD PureJSSelectors Content Advisor integration:

    • Use PureJSSelectors.registerContentAdvisorAuthService with the onAccessTokenReceived callback to obtain the access token.
    • Pass the obtained token to the apiToken prop of the Upload MFE.
  3. Implement destination folder selection:

    • Provide the targetUploadPath because the AllInOneUpload component does not provide a user interface for selecting the destination folder.
    • Use the DestinationSelector MFE to allow users to select the destination folder.
    • Use the PureJSSelectors.renderDestinationSelectorWithAuthFlow export to render the DestinationSelector with its authentication flow.
    • After the user selects a folder, pass the selected path to the Upload MFE as targetUploadPath.
  4. After implementing the integration, verify the following:

    • The upload UI renders in the Angular application.
    • The IMS authentication session is reused.
    • Uploads succeed to the selected destination folder.

Note: Refer to the official Adobe example repository for a complete Angular example that demonstrates UMD module integration.

recommendation-more-help
experience-cloud-kcs-help-kbarticles