Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new

Learn more

View all

Sign in to view all badges

How to add image fields/attachments to HTML5 form using JavaScript

Level 8
Level 8

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. This feature is available under xfa PDF Forms.

I did some research 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 works in 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 works in 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 =;


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;

0 Replies