Acrobat form field that allows Reader user to browse and insert a picture into a predefined area

Jay,

The new version of Reader, which was announced today (see AcrobatUsers.com), will now allow you to use the field.buttonImportIcon method: http://livedocs.adobe.com/acrobat_sdk/9.1/Acrobat9_1_HTMLHelp/JS_API_AcroJS.88.737.html

For a bit more information, see: http://forums.adobe.com/thread/743823

Here's the minimum code that can be used in the Mouse Up event of a button that's configured with a layout that's something other than "Label only":

// Mouse Up script for a button

event.target.buttonImportIcon();

Since this isn't backwards compatible with Reader, you'll probably want to add additional code to test what version is being used and alert the user if it's pre-11. You should also check the return value to see if anything went wrong. The hard part is getting everyone to upgrade, but this and a number of other features should make it worth it.

No, you don't need Acrobat 11 to create a form that uses this method, but your Reader users will need to upgrade. I don't see that they've announce the release date for Reader yet, but in the past it has usually been within about a month of the announcement.

Unfortunately, with Reader the source of the icon has to be a PDF, but it's farily easy these days to convert an image to a PDF. You can even do it with an XFA form that you set up for this purpose, but it will have to be Reader-enabled even when used with Reader 11. I have hope that they may change this with a future version. Please post a feature request if you'd like to see this too.

You have the ability with JavaScript to dynamically set the button label (see the field.buttonSetCaption method). The buttonImportIcon returns a code that allows you to determine whether the icon was successfully imported, and you can alter the button label based on it.

To have one button cause another button to be populated, the code would be something like:

// Get a reference to the button we want to populate

var f = getField("IMAGE_BUTTON");

// Prompt the user to import an image

f.buttonImportIcon();

This would be the Mouse Up script of the "Click Here to Insert Picture" button.

+1 to allow jpeg format for the end users on Adobe Reader

For Adobe Reader, it does not that I'm aware. That would be a nice improvement. Currently I believe it only allows insertion of PDF.

Acrobat on the other hand (the full version) will allow you to insert other image types as far as I know.

Everyone - this is great. I have noticed that when you bring in the files into the PDF it retains all of the resolution of that file. I incorrectly assumed that the "icon" was just the thumbnail view of the page therefore would create a small file when saved. Unfortunately I am bring in high resolution PDF files that were created for print that are sometimes huge, so a file created by bringing in 6 pages will go above 100mb routinely. Is it possible to create this with a low resolution version only using the thumbnail that is embedded in the imported PDF?

Thanks! Any help is greatly appreciated.

If you're using Acrobat you have the ability to optimize the file after you import images. You cannot do this with Reader though.

Is there a way to have the picture take the whole space of the button rather than just put it in the middle?

Yes, go to the button's Properties, Options, Advanced, and select the Fit to Bounds option.

This is very helpful information!! I have added your script to a report we use and it does just what we need with a little help from a photo resizer/pdf converter.

My question: Is there a script to clear the images?  I cannot seem to find a way to include clearing the pictures (button icons) in the reset form function.

Message was edited by: rhiannonstrange

You need to somehow get an icon object that represents a blank icon. There are several ways to do this, but what I usually do is use the field.buttonGetIcon method (http://livedocs.adobe.com/acrobat_sdk/9.1/Acrobat9_1_HTMLHelp/JS_API_AcroJS.88.736.html) to retrieve a blank icon from an existing button (e.g., a hidden one placed just for this purpose). You can then use the blank icon with the field.buttonSetIcon method to effectively clear the icon.

PURE GENIUS!  Thank you!

I'll be able to put one together later today.

George,

This whole forum post has been VERY HELPFUL. Unfortunately, I got stumped at the same point as Jay and was also interested in seeing if you had a sample PDF demonstrating the "Clear Buttom" method.

Sure, anything for someone from Margaritaville (that's Jimmy in my avatar): https://workspaces.acrobat.com/?d=Y8yNh5pIkMTlreBhZ5CUHQ

There's a hidden button in the upper-left corner of the page that's used as the source of a blank icon.

Thanks so much for the info, George. 

By chance is there any way to export the photo into Excel like you can the rest of the field info.  We are sending out a form, which now can contain a photo, thanks to you.  When we receive the form with the photo back from multiple recipients, we want to export the field info into Excel.  Is there any way to make that photo appear in the exported Excel file?  Thanks!  MJinTX

Not directly using just Acrobat. When I need to retrieve content of a button icon, I use the FDF Toolkit to save a button appearance as a PDF, and convert the PDF to an image. For images in buttons, you can do this manually in Acrobat by flattening the form and exporting the images, or a number of similar ways.

On second thought, there may be a way via JavaScript. I'll have to do a few tests...

Oh...question.

Can I use this to allow a tablet user to take a picture and insert it into the form as a response?  If not, is there a way to do that? (assuming they upgrade their reader?)

The buttonImportIcon method does work with Readdle's PDF Expert on iOS, which is currently the best PDF viewer on iOS for forms/JavaScript/multimedia PDFs. It doesn't not work with Adobe Reader on iOS/Android. I don't know if it works with any other PDF viewers on Android.

With PDF Expert, the user can choose to take a picture with the camera or select a previously stored image.

Hi George,

I have a pdf with a bunch of form fields and a button to allow users to add a photo to the pdf.  I'm using

event.target.buttonImportIcon(); in the icon button javascript.  I also have a submit button that when clicked submits certain form fields from the pdf form to an aspx page (html http post) where I then read those values back and fill a template pdf (based on the original) and fill those values back in.  In the original pdf I selected the icon value to be submitted on the submit click but it doesn't appear that the image value is being passed to the page.  Is there a way to make this work?  I assumed it would when the submit button allowed me to click the icon button value to pass.  I just need to pass this image value to my page and populate that image on the template pdf copy.

Any assistance would be appreciated. If it's not possible, you mentioned the FDF toolkit, what is that and would it work for what I'm trying to do?  Oh, and I'm trying to do this in acroforms not livecycle.

Thanks!!!

The image data is not included if you choose to submit as HTML or XFDF. If you use FDF, the FDF Toolkit allows you so save any button appearances that are present as a PDF. Unfortunately, even though the FDF Toolkit is still available for free from Adobe, it has not been updated for some time. You might want to look into what the third-party FDFToolkit .NET has to offer.

Hi George,

I've been going through this entire thread, but can't seem to get it to work. Just like the initial question stated, I'd like the user to click a button to insert an image (with Reader!). I created a Mouse Up event with the script:

event.target.buttonImportIcon();

It works just fine in Acrobat Pro 11, but when clicking on it in Reader, it just "flickers" quickly, but there is no option to insert anything...

I know that you mentioned to have the users upgrade, but I'm not sure that applies to this? Please tell me what I'm doing wrong..!

Thanks a bunch!

/ John

Not all JavaScript that is available to Acrobat is available to Reader. "buttonIImportIcon" is one such method. The 'X' in the last column idicates this is not avaiable to Reader.

The documentation is wrong on that one. buttonImportIcon will work in Reader, but only Reader XI, and it will only allow you to select a PDF file to import as the button's icon.

What version of Reader did you test with?

Thanks for your help guys!

Reader XI does the trick (I first tried with X) and I assume all three of you are already pushing Adobe to re-install the feature to upload also other formats than .pdf, correct? ;-)

In your experience, what would you inform users that are supposed to fill in my excellent form..?

1 Upgrade to latest version of Reader, including a link where they can upgrade

+2 Convert your pics to .pdf (which WILL be an issue for most users!) before uploading

The option, as I see it, is to have the users send me their pics and I can upload them myself with Pro. Or do you have any smoother solutions to suggest?

Oh yes, one more thing: when uploading the Icon, my text "INSERT IMAGE" is still visible on top of the pic. I think George, you described in this thread how to blank out/remove that text once the pic is uploaded..? Is there an easy way of achieving this?

Many thanks again for this prompt help!

Message was edited by: lambertcollection

Hi George,

I have been playing around with the Icon and was wondering if it is possible to apply a condition to the statement. example IF , Else IF.

James,

You can use an if statement in JavaScript, but it's not clear to me what you want to do. If you provide more information, I'll try to help.

George,

I want an image to appear if a field equals something.

I think this is how it might look. 

var oBlankIcon = getField("BLANK_ICON").buttonGetIcon({nFace: 0});

var A1 = getField(“Average”).value;

if (A1 = “N/A”) event.value = getField("IMAGE").buttonSetIcon({oIcon: oBlankIcon, nFace: 0});

You'd normally just use the display property ot show/hide a button to show/hide the image, something like:

// Show/Hide a button based on a field value

var f = getField("IMAGE");

if (getField("Average").valueAsString === "N/A") {

    f.display = display.hidden;

} else {

    f.display = display.visible;

}

But this code may have to be adjusted depending on when you want it to be triggered.

It could also be simplified to the equivalent:

getField("IMAGE").display = getField("Average").valueAsString === "N/A" ? display.hidden : display.visible;

Post again if this isn't what you want.

George,

This is what I was looking for.

Thank you.

I have been playing around with the code and it seems to be hanging up.

I can make the image appear but once it is hidden it will not reappear.

Ideas?