Upload asset to DAM Path using Coral FileUpload

[hiral-vasa]

Hi All,

Kindly suggest some way to upload the asset directly to a DAM path using the coralUI3 FileUpload resourceType.

I am trying to add a field in the properties page, similar to the thumbnail field. When the image is dragged and dropped from the machine, it creates a file under the page/jcr:content and stores the binary, I believe. 

I am looking for a way to create the asset directly to a DAM path (/content/dam/test-folder). I tried using the uploadUrl property available with the FileUpload cmp (https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/...) but no luck.

Kindly suggest the best solution for the above issue.

Thanks in advance!

[srikanthpogula]

Hi @hiral-vasa ,

One approach I can think is to implement an event listener which listens to create node event when image is uploaded under page/jcr:content and then copy/move the image to DAM folder.

[hiral-vasa]

Thanks for a quick reply.

The file that gets created under page/jcr:content is a nt:file and not dam:Asset.

I even tried to temporarily copy-paste the binary content from nt:file to the original rendition but no luck.

[Ravi_Joshi · Accepted solution]

Hi @hiral-vasa ,

To upload an asset directly to a DAM path using the CoralUI3 FileUpload component, you will need to use the Asset HTTP API provided by Adobe Experience Manager (AEM). The Asset HTTP API allows you to programmatically create and manage assets in the DAM, including uploading and updating binary content.

To use the Asset HTTP API to upload an asset to a DAM path using the FileUpload component, you can follow these steps:

1. In your AEM project, create a FileUpload component that includes the uploadUrl property and a form that includes the enctype attribute set to "multipart/form-data".

2. In your client-side code, use the FileUpload component's change event to get the file that was selected by the user and send an HTTP POST request to the uploadUrl provided by the FileUpload component.

3. In the body of the POST request, include the binary content of the file along with any other metadata that you want to include with the asset.

4. In the HTTP headers of the POST request, including the Content-Type header set to "multipart/form-data" and the slug header set to the desired filename for the asset.

5. In the response to the POST request, you should receive a 201 Created status code if the asset was successfully created in the DAM.

Here is an example of how you might implement the file upload using the Asset HTTP API and the CoralUI3 FileUpload component:

<!-- FileUpload component with the uploadUrl property set -->
<coral-fileupload
  accept="image/*"
  uploadUrl="/content/dam/test-folder.createasset.json"
  multiple
  title="Select image to upload"
  name="file"
  value="{FileList}"
  variant="quiet"
  class="coral-FileUpload"
>
  <input type="file" multiple />
  <button type="button" class="coral-FileUpload-button coral-Button coral-Button--secondary coral-Button--square">
    <coral-icon size="S" class="coral-FileUpload-icon" icon="upload" />
  </button>
</coral-fileupload>

<!-- Form with the enctype attribute set to "multipart/form-data" -->
<form enctype="multipart/form-data">
  <!-- Other form fields and controls -->
</form>

<!-- Client-side code to handle the file upload -->
<script>
  // Get the FileUpload component
  const fileUpload = document.querySelector('coral-fileupload');

  // Handle the change event of the FileUpload component
  fileUpload.addEventListener('change', (event) => {
    // Get the file that was selected by the user
    const file = event.target.files[0];

    // Create a FormData object to hold the file and other form data
    const formData = new FormData();
    formData.append('file', file);

    // Send an HTTP POST request to the uploadUrl
    fetch(fileUpload.uploadUrl, {
      method: 'POST',
      body: formData,
      headers: {
        'Content-Type': 'multipart/form-data',
        slug: file.name
      }
    })
      .then((response) => {
     //Some Action
}

Hope This Helps!

Thanks,

Ravi Joshi

[hiral-vasa]

Hi Ravi,

Thanks for a quick reply.

I tried the above solution and here is the ajax call : 
Made a slight change in the call - multipart/form-data as content type created a folder instead of an asset. So used image/jpeg instead.

$.ajax({
                type: 'POST',
                processData: false,
                url: '/api/assets/test-folder/'+file.name,
                contentType: 'image/jpeg',
                data: formData,
                headers: {
                    'Content-Type': 'image/jpeg',
                    slug: file.name
                },
                success: function(data, status, request) {
                    console.log("success");
                },
                error: function(xhr, textStatus, errorThrown) {
                    console.log("error");
                }
            });
    

This creates the asset under the given path but it doesn't create the renditions.
Also, the original rendition file looks something like this : 

Kindly suggest on how can I fix the above issue.
Thanks in advance!

[hiral-vasa]

Hi,

So, it worked for me with a slight change of passing the image file as the data in AJAX call :

 $.ajax({
                type: 'POST',
                processData: false,
                url: fullUrl,
                contentType: 'image/jpeg',
                data: file,
                success: function(data, status, request) {
                    console.log(contentUrl);
                    console.log(data);
                },
                error: function(xhr, textStatus, errorThrown) {
                    console.log("error");
                }
			});

 
Thanks for the help @Ravi_Joshi.