How to add image attachments to HTML5 form using JavaScript

[tarekahf]

I am trying to overcome the limitation of the image field in Adobe HTML5 forms. The image field doesn't allow browsing images to select the image to be inserted in the field.

I did some research, and trying to find out how to solve this problem using JavaScript. My approach is based on using event.target (doc) object to import the image as attachment, and get the base64 string of the image.

I did a quick test under HTML5 form, and I found out that if I can get the base64 format of the image using a Browse File Dialog box, then the problem is solved. See sample code below to explain.

Appreciate your help to solve this problem.

=====

JavaScript to Save the base64 string of the embedded image in the image field "imgFld", and it is working under HTML5 preview:

txtImageStr.rawValue = imgFld.rawValue; imgFld.rawValue = null;

JavaScript the restore the image from the string value stored in the text field, and it is working under HTML5 preview:

imgFld.rawValue = txtImageStr.rawValue; txt.rawValue = null;

The following code is working under Acrobat (PDF) but not working when using HTML5 Preview:

var oObj = event.target; oObj.importDataObject(0); var oDataObj = oObj.getDataObjectContents(0); var inputStream = oDataObj; //var inputStream =  event.target.getDataObjectContents("Cool.jpg"); //file name must be "Cool.jpg" // Get a new stream with the image encoded as base64 var vEncodedStream = Net.streamEncode(inputStream, "base64"); // Get a string from the stream var sBase64 = util.stringFromStream(vEncodedStream); // assign the base64 encoded value to an image field imgFld.rawValue = sBase64;

[Khushwant_Singh]

HTML5 forms support only most commonly used API's. The following page lists all the supported JavaScript methods:

https://helpx.adobe.com/aem-forms/6/html5-forms/scripting-support.html

You can also take a look at the the following article to learn feature differentiation between HTML5 forms and PDF forms:

https://helpx.adobe.com/aem-forms/6/html5-forms/feature-differentiation-html5-forms-pdf-forms.html

[tarekahf]

Thank KhushwantSingh for the reply.

I already came across such articles. I am aware of the limitations and differences. That is why I am posting here to get ideas to solve this problem.

I also found out that I can enable adding attachment, check this link:

https://helpx.adobe.com/aem-forms/6-1/html5-forms/enabling-attachments-html5-form.html

It seems like it will take at least one day to enable such feature. But, at least I want to know if I enable adding attachment, will the above JavaScript used to add attachment to PDF, will it work under HTML5 format?

Tarek

[varundua]

No,

importDataObject API is not supported on event.target object and the same is true for other APIs that you have used in your code. So I regret to say but your code will not work in HTML preview.

Regards
Varun

[tarekahf]

Thank you varundua.

So, how do you allow the end-user to add image to an image field when using HTML5 forms?

Could you please give me a sample if this is possible.

Tarek

(related post in Adobe LiveCycle ES4 forums: https://forums.adobe.com/thread/2070534)

[TundraSteve · Accepted solution]

If you go to http://216.104.208.185/content/demo-listings/demo-listings.html

Look at the sample -> Upload your photo and see it being displayed in the mobile form

If that's what you're looking for we can send over a package

[tarekahf]

Yes ! Thanks a lot. This is what we want. Please send me the details.

Tarek

[GirishBedekar]

download the package from

https://files.acrobat.com/a/preview/89279039-e3eb-4a8c-9f31-580d4d57f578

import the package into CRX

take a look at the custom profile. The custom profile adds a hidden input type = file field.The xdp contains a button by the name of "medical". when this button is clicked we invoke the click event of the input type=file field. 

you will still have to do some work in order to get the attached image submitted to the back end process. that part is not done yet

[tarekahf]

Hi GirishBedekar,

Honestly many thanks for providing the package  

Now, I have to figure out how to make use of this package.

We have Adobe LiveCycle ES4 (and we didn't yet apply the latest patch). We don't have AEM yet. Appreciate your help to guide me to import this package in our environment. I asked the person in charge of Adobe LiveCycle and he didn't know exactly how to import the package into CRX. Actually, we don't know what is CRX. We are using Adobe LiveCycle ES4 but we didn't dig too deep inside though.

Note: I checked the code-behind of the HTML5 form of the image field you provided. I understand exactly what is done. I know how to do the same in a regular HTML page. The only issue is how to apply that from Adobe LiveCycle Designer. If there is a way to use LiveCycle Designer insert HTML elements (such as type=file) and regular JavaScript that works in the browser, then I believe I can do it.