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/uploadpackage 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:
-
Use the UMD export of the
assets-uploadbundle in your Angular application because the@assets/uploadpackage is not available in the public npm registry. -
Reuse the IMS authentication session from the UMD PureJSSelectors Content Advisor integration:
- Use
PureJSSelectors.registerContentAdvisorAuthServicewith theonAccessTokenReceivedcallback to obtain the access token. - Pass the obtained token to the
apiTokenprop of the Upload MFE.
- Use
-
Implement destination folder selection:
- Provide the
targetUploadPathbecause theAllInOneUploadcomponent 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.renderDestinationSelectorWithAuthFlowexport to render the DestinationSelector with its authentication flow. - After the user selects a folder, pass the selected path to the Upload MFE as
targetUploadPath.
- Provide the
-
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.