Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Using Assets Http APIs in Postman or through React Code

Avatar

Employee Advisor

Please suggest how can we leverage Assets Http API in react code.

1. I'm trying to convert "Create a folder" request into react code, how will the below request map into the code. I can understand Content-Type: application/json will go in headers. What does -d map to in the code?

  • POST /api/assets/myFolder -H"Content-Type: application/json" -d '{"class":"assetFolder","properties":{"title":"My Folder"}}'

https://experienceleague.adobe.com/docs/experience-manager-65/assets/extending/mac-api-assets.html?l...

 

2. How do we access these API in postman (other than curl)? Now AEM is on cloud so cannot use admin credentials and on using generic user credentials as Basic Auth, I'm getting 401 Unauthorized.

3. I'm able to run GET request in browser, how to do POST request of these APIs in postman.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @shelly-goel,

Please find my comments inline in green

1. I'm trying to convert "Create a folder" request into react code, how will the below request map into the code. I can understand Content-Type: application/json will go in headers. What does -d map to in the code?

  • -d indicates the data input for the POST request - To be part of request body while calling API.

2. How do we access these API in postman (other than curl)? Now AEM is on cloud so cannot use admin credentials and on using generic user credentials as Basic Auth, I'm getting 401 Unauthorized.

3. I'm able to run GET request in browser, how to do POST request of these APIs in postman.

  • Since we are accessing API call hosted from Cloud Instance, we can use Bearer Authorization Type with token value as input (Not a Basic Authorization type that we would do with local AEM instance or Cloud Service SDK local instance)
  • Raw input with JSON as input with respective Content-Type Header
    {
                    class: 'assetFolder',
                    properties: {"title":"New Folder"}
    }

Sample Application in above doc illustrates the folders listing and update metadata. Below is the similar call for "Create Folder" request that you can use in React component.

 

 // The root context of the Assets HTTP API
const ASSETS_HTTP_API = '/api/assets';
const NEW_FOLDER_TO_CREATE = '/myFolder';

 await fetch(`${params.aem}${ASSETS_HTTP_API}${NEW_FOLDER_TO_CREATE}`, {
            method: 'post',
            headers: { 
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' + params.accessToken // Provide the AEM access token in the Authorization header
            },
            body: JSON.stringify({
                class: 'assetFolder',
                properties: {
                    "title": "New Folder"
                }
            })
        })
        .then(res => { 
            console.log(`${res.status} - ${res.statusText}`);
        });

 

 Outside this, please do let know on what action/scenario(Eg. on load of a component or on any other CTA)you are expecting to trigger "Create Folder" call, we can decide on where to use fetch call accordingly from React component Standpoint. 

View solution in original post

6 Replies

Avatar

Community Advisor

Hi @shelly-goel ,

 

You can watch the below videos to understand how can we use postman/React to trigger API. To resolve unauthorized user issue I believe you can use system user (user should have privileges assigned) to get resource resolver from sub service, 

 

Using Postman 

Hit API from react component

Avatar

Correct answer by
Community Advisor

Hi @shelly-goel,

Please find my comments inline in green

1. I'm trying to convert "Create a folder" request into react code, how will the below request map into the code. I can understand Content-Type: application/json will go in headers. What does -d map to in the code?

  • -d indicates the data input for the POST request - To be part of request body while calling API.

2. How do we access these API in postman (other than curl)? Now AEM is on cloud so cannot use admin credentials and on using generic user credentials as Basic Auth, I'm getting 401 Unauthorized.

3. I'm able to run GET request in browser, how to do POST request of these APIs in postman.

  • Since we are accessing API call hosted from Cloud Instance, we can use Bearer Authorization Type with token value as input (Not a Basic Authorization type that we would do with local AEM instance or Cloud Service SDK local instance)
  • Raw input with JSON as input with respective Content-Type Header
    {
                    class: 'assetFolder',
                    properties: {"title":"New Folder"}
    }

Sample Application in above doc illustrates the folders listing and update metadata. Below is the similar call for "Create Folder" request that you can use in React component.

 

 // The root context of the Assets HTTP API
const ASSETS_HTTP_API = '/api/assets';
const NEW_FOLDER_TO_CREATE = '/myFolder';

 await fetch(`${params.aem}${ASSETS_HTTP_API}${NEW_FOLDER_TO_CREATE}`, {
            method: 'post',
            headers: { 
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' + params.accessToken // Provide the AEM access token in the Authorization header
            },
            body: JSON.stringify({
                class: 'assetFolder',
                properties: {
                    "title": "New Folder"
                }
            })
        })
        .then(res => { 
            console.log(`${res.status} - ${res.statusText}`);
        });

 

 Outside this, please do let know on what action/scenario(Eg. on load of a component or on any other CTA)you are expecting to trigger "Create Folder" call, we can decide on where to use fetch call accordingly from React component Standpoint. 

Avatar

Employee Advisor
Thanks Vijaylakshmi, it works. However, it's not generating the folder title. Can you please suggest?

Avatar

Community Advisor

Hi Shelly, It works with key name as "jcr:title" instead of "title". Here is the updated request body for "Create Folder" request -

{ class: 'assetFolder', properties: {"jcr:title":"New Folder Title"} }

Avatar

Employee Advisor
Can you also provide sample snippet for Upload Asset API?

Avatar

Community Advisor

Hi @shelly-goel,

Create Asset and Update asset binary HTTP API is deprecated in AEMasCS. We need to make use of Asset upload and there exist an open source NPM module named @adobe/aem-upload for the same - https://github.com/adobe/aem-upload

(Sample usage is detailed in README.MD)

 

Details about the flow of Asset Upload is detailed in https://experienceleague.adobe.com/docs/experience-manager-cloud-service/assets/admin/developer-refe...