Sample | Create/upload DAM assets from Adaptive forms

[Mayank_Gandhi]

Hello Community,

It has been a while that I posted something here.

A lot of people want to leverage form with DAM assets. Simple example, you have an adaptive form and you want user to upload the image but instead of saving it in some other system you want to leverage DAM assets.

Two main things for such use case:

•  DAM has a very exhaustive set of HTTP API that can help you create folders and assets.
•  Form fields have a lot of events on which you can trigger the HTTP API and POST the form data to DAM.

Sample:

Create a simple html widget for file upload.

<p>Image</p>
<p><input id="default_file" type="file" name="logo">&nbsp;<button id="clear">clear</button></p>

Create JS to handle file upload and ingest the payload to DAM API.

$('#default_file').change(function(){
//on change event
formdata = new FormData();
if($(this).prop('files').length > 0)
{
file =$(this).prop('files')[0];
formdata.append("file", file);
formdata.append("name", "yourLogoName.jpeg");
}

jQuery.ajax({
url: "http://localhost:4502/api/assets/test/*",
type: "POST",
data: formdata,
processData: false,
contentType: false,
success: function (result) {
alert("all is well");
},error: function(){alert("some err occurred");}
});

});

Thanks,

Mayank Gandhi

Connect with me over LinkedIn

[kautuk_sahni]

@Mayank_Gandhi Thank you for sharing this with AEM community. And Good to see you back. Encourage your peers to also contribute to the AEM Community.