How to add image attachments to HTML5 form using JavaScript



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 (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 =; oObj.importDataObject(0); var oDataObj = oObj.getDataObjectContents(0); var inputStream = oDataObj; //var inputStream ="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;

Accepted Solutions (1)

Accepted Solutions (1)

Answers (7)

Answers (7)



Hi GirishBedekar,

Honestly many thanks for providing the package  cool

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.



download the package from


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



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.


(related post in Adobe LiveCycle ES4 forums:




importDataObject API is not supported on 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.




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:

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?