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 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.
txtImageStr.rawValue = imgFld.rawValue; imgFld.rawValue = null;
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;
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
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.
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
Yes ! Thanks a lot. This is what we want. Please send me the details.
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: https://forums.adobe.com/thread/2070534)
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.
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:
You can also take a look at the the following article to learn feature differentiation between HTML5 forms and PDF forms: