Expand my Community achievements bar.

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

Avatar

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 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 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 = 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;



0 Replies