Skip to main content
December 12, 2016
Question

JavaScript for Clearing JPEGs out of a Form??? (Adobe Acrobat Pro DC)

  • December 12, 2016
  • 3 replies
  • 2125 views

I am building a simple form to have employees submit their weekly "Photo Reports" from the field.

I have set up a large button (space large enough for the JPEG) using the following JavaScript: event.target.buttonImportIcon();

When the form is blank, I am able to click on the big gray box (button) to have a prompt appear that says "Select Icon".

From there, I am able to "Browse..." and select a JPEG from my files.

I click "Open" followed by "Okay".

The picture proportionally fills the space that I want the JPEG to be in the form.

This is exactly what I want.

However, once that JPEG is in its location, I cannot delete it.

I can click on it and the "Select Icon" prompt appears; I can select a different photo.

But I cannot easily clear the photo without editing the form.

I want the end-user to be able to clear the pictures in the form the same way that text can be cleared.

I have very very little experience with all of this.

Any direction would be best received in a "step-by-step" format.

Overall Goal:

-- Build a button that clears a single photo

and/or

-- Build a button that clears all the photos that are added to the form.

This topic has been closed for replies.

3 replies

JR Boulay
Community Expert
Community Expert
December 12, 2016

Hi.

Instead of importing a fake gray image, you can target a button without an icon… and import it.

So, this will delete the current icon.

In this script "Button1" is the button without icon (that can be hidden), and "Button2" is the button to reset:

var oIconClear = this.getField("Button1").buttonGetIcon({nFace: 0});

this.getField("Button2").buttonSetIcon({oIcon: oIconClear, nFace: 0});

Acrobate du PDF, InDesigner et Photoshopographe
Karl Heinz  Kremer
Community Expert
Community Expert
December 12, 2016

Joel gave you the key to solving this, but there are a few things you can do to make this a bit easier on you.

First, you need to use a hierarchical name for your image buttons (e.g. "Img.1", "Img.2", and so on). Then, create individual buttons to clear a single image using a similar naming convention (e.g. "ImgBtn.1" to clear "Img.1", "ImgBtn.2" to clear "Img.2" and so on). Now you can determine the index (the numeric part of the button name) when a button is clicked, and then use that to dynamically create the associated image field ("ImgBtn.1" -> "Img.1"). And finally, you call the code from Joel's reply to copy the image from a hidden and read-only placeholder button (which I call "blank"):

// get the button index

var pos = event.target.name.lastIndexOf(".");

var myIdx = event.target.name.substring(pos+1);

// get the associated image field

var f = this.getField("Img." + myIdx);

// get the blank image and set it's icon to the associated image field

f.buttonSetIcon(this.getField("blank").buttonGetIcon());

Because you've used a hierarchical naming convention for your image fields, you can now also used a shortcut to dynamically loop over all image fields without having to know how many there are, or what their full names are by using the following script:

var f = this.getField("Img");

var ar = f.getArray();

for (var i=0; i<ar.length; i++) {

    f = ar;

    ar.buttonSetIcon(this.getField("blank").buttonGetIcon());

}

It should be obvious, but I'll state it again: Don't copy any code that you don't fully understand. Otherwise you will not be able to make the adjustments necessary to make this work in your document. If you need help understanding what these lines do, consult the Acrobat JavaScript SDK documentation, and/or ask here. You can find the documentation here:

Acrobat DC SDK Documentation

December 12, 2016

Okay. First, thank you for the quick and detailed reply.

I need the answer broken down a little bit more.

For the image button ("Img.1"), in the button properties > Actions > "Run a JavaScript" > Edit:

What should the language be here? event.target.buttonImportIcon();  ???

Then for the clear button ("ImgBtn.1") in the button properties > Actions > "Run a JavaScript" > Edit:

What should the language be here?

Does there need to be a third button?

Where does the blank image actually come from?

Sorry, I really am a rookie at all this.

Karl Heinz  Kremer
Community Expert
Community Expert
December 13, 2016

For the image button ("Img.1"), in the button properties > Actions > "Run a JavaScript" > Edit:

What should the language be here? event.target.buttonImportIcon();  ???

That is correct, this will ask the user to select a file (keep in mind that this will only work for image files when the form is opened in Adobe Acrobat, with the free Adobe Reader you can only import PDF files).

Then for the clear button ("ImgBtn.1") in the button properties > Actions > "Run a JavaScript" > Edit:

This is where you use my first script. The important thing here is that both the image button (Img.1) and the "clear the image" button (ImgBtn.1) need to have the same numeric "extension". Otherwise this button cannot find the associated image button.

Does there need to be a third button?

The third button is to clear all image fields (if you have more than one). If I remember correctly, this is something you asked for in your original question. You would use my second script from above for that.

Where does the blank image actually come from?

You create a button that you call "blank" (that's what is used in my script). You then set the button properties so that it is hidden and read-only:

You do not have to assign an image to this button, by default, it uses a blank icon that you can actually retrieve and assign to your own button (which is what you are doing with the scripts I've shown).

This should do the trick.

Joel Geraci
Community Expert
Community Expert
December 12, 2016

The easiest way to do this is to create another button, probably hidden, that contains a placeholder image... which could be all gray... and then use JavaScript to get that icon and use it to set the icon of the button you want to clear.

this.getField("MyNormalButton").setIcon(this.getField("ButtonWithMyPlaceHolder").getIcon());

You could create an array of field names and put that code in a loop to clear all the fields in the array.

J-

Joel Geraci
Community Expert
Community Expert
December 12, 2016

Ack! My code above should have been...

    this.getField("MyNormalButton").buttonSetIcon(this.getField("ButtonWithMyPlaceHolder").buttonGetIcon() );

But Karl's answer is better.