Clear Image Field in PDF Form With Acrobat’s JavaScript

You’ve probably heard by now that the latest release of the Adobe Acrobat DC subscription version comes with a couple of new form field types (see here for more information). Image fields are not new, but they are now much easier to create. When the user clicks on a field, Acrobat will then prompt to select an image file, and the image field will get filled with the contents of that file. That is pretty straight forward.

Unfortunately, resetting a form will not remove that image, but will clear out all other information added to a form. How can we add functionality to the form that also clears out the image field(s)?

Before we dive into that, we need to take a look how we can programmatically set the button icon. The Acrobat JavaScript API gives us two different methods:

There does not seem to be any method to reset or delete a button icon. This means we have to think a bit outside of the box to come up with a solution. There is a method to retrieve a button icon (Field.buttonGetIcon()), this means we can setup a button with a blank image, and then get that blank image and assign it to the image field/button that we want to reset. This works, and the good news is that we don’t even have to setup the button with a blank image, that is what it will return by default.

The process to set this up in a form is as follows:

Create a Hidden and Read-Only Button

The “blank” button we want to use to retrieve the blank image from should not appear on the user interface, and a user should also not be able to interact with such a button. This means we need to make it read-only and and hidden. To do that, open up the button’s properties dialog and go to the “General” tab.

Screenshot showing the \

Use a meaningful name for this button – I’ve used “blank” in the example above – and set the field to “Hidden” and “Read Only”.

Create a “Reset” Button

To reset the form and the image button, we need to add a “Reset” button to our form. Add a button and set it’s label to “Reset”:

In the next step we will develop the JavaScript code that we want to execute when this button is clicked.

JavaScript Code to Reset an Image Field

We can now retrieve the button’s icon using the following line of JavaScript code:

var buttonIcon = this.getField("blank").buttonGetIcon();

We can combine this with the command to assign this new icon to an existing field. Let’s assume we have a field named “ImageField” in the form. To set it’s button icon, we need to perform the following command:

this.getField("ImageButton").buttonSetIcon(buttonIcon);

And, because we are using the icon from the blank button, we are essentially erasing the existing image.

In addition, we also want to reset the rest of the form, so that gives us this as the final script:

this.resetForm();
this.getField("ImageButton").buttonSetIcon(this.getField("blank").buttonGetIcon());
Screenshot showing the \

We can now – on demand – reset the form and the image button in our form.

Here is a PDF page that shows this functionality: resetImageButton.pdf

This entry was posted in Acrobat, JavaScript, Programming, Tutorial and tagged , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *