8 Replies Latest reply on Feb 18, 2016 8:25 AM by tarekahf

    How to add image attachments to HTML5 form using JavaScript

    tarekahf Level 1

      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;