Image Field in Adaptive Forms

[jagjeetthukral]

Haven’t you come across a scenario, where the business wants you to emulate the paper based version of the forms as is on web channel ? If so, then I think the hardest part of such requests is to have an Image Field in Adaptive Form. It is like where the person filling up the form should be able to attach and then see or preview the passport size photograph or may be some other photograph while within the form’s view. Adaptive Forms only provide a hyperlink to the uploaded image. This link when clicked, depending upon your browser’s settings, will either open the image in a new tab or download it.

Another important reason for this being popular is because there is a similar widget already present in Mobile Forms aka XDPs aka XFA Forms aka Form Templates.

Another related scenario is where you have to also ensure that this image is also similarly visible is the print channel or the Document of Record. This is an equally hard thing to implement, if not harder for developers and consultants. We will be looking at the Document of Record integration in a future article. In this article we will stick to basic implementation of Image Field in Adaptive Form. In fact, there are two ways to achieve this, using the Out Of the Box File Upload widget or by creating a custom widget. For now, let us look into the implementation using OOTB File Upload Component.

I have created a blog post with step by step details for implementing Image Field in Adaptive Form , on AEM Forms Blog

In case you have any troubles implementing this, please feel free to ask your questions here.

Thanks & regards,

Jagjeet Singh

AEM Forms Blog

[kautuk_sahni]

This is really a wonderful content. Thanks for sharing this.

-Kautuk

[tarekahf]

The links you provided in your post are not working. I need to find out how to implement a File Upload Component Field for Images in AEM Adaptive Form.

Tarek

[GirishBedekar]

https://forms.enablementadobe.com/content/samples/samples.html?query=0
searxh for inline image

[tarekahf]

Thanks a lot. Is this the same as developing a component? I am looking for a solution that provides a component that you can drag-and-drop onto the form that provides the image file upload function.

[GirishBedekar]

AEM Forms provides image component out of the box that can be dragged and dropped on to the form 

You will need to AEM Forms license 

[tarekahf]

Yes, we already have the needed license. But I don't see a File Upload Component that allows you to see the image after upload. You can use a File Attachment Component. After you attach the image, it will show a paper clip. Then, you have to click on the paper click to see the image. I want an option to show the image as a thumbnail with original quality. This is because the use case we are working on needs to allow inserting many images and maintain the original high quality of the uploaded file. The original quality should be saved for later use, and while working on the form, display the thumbnail version.

Can you help in pointing me to resources to build a component for Adaptive Form that you can drag-and-drop into the form panel?

Tarek

[GirishBedekar]

Oh ok

to display the uploaded image you will have to write the code similar to the link that I shared

we do not have anything out of the box to accomplish that capability 

[tarekahf]

You said, "we"? Are you referring to Adobe? or some other company? And the point is to find an article or document that describes how to build a component for AEM Forms.