Need a file upload button, that shows a thumbnail and attaches to Attachments window

[Kelvin3054731488h1]

Hello. I need major help with this one. I will definitely Tip if you already have the knowledge or can figure this out for me. In Adobe Acrobat Pro forms, I am trying to create a button that will let my tech insert fuel and other purchase receipts to the form when asking for reimbursement. The button needs to be just a rectangle box, that when clicked, will open their desktop(windows) and let them select a file to add. For example. If they select a gas receipt jpeg, it will show a thumbnail size pic of the receipt as well as attach the pic to the form. I can then see the pic in my attachment view when reviewing the submitted form. Also, a popup saying the attachment was successful would be nice too. I hope you can help me. I actually have a button with the JavaScript created on a practice form I created, but it makes me choose the file two times. I used Document java script and Run a java script under button properties. Apparently, there is a discrepancy somewhere in my script. Even though it works, the choosing the file twice thing is a problem. I prefer to do both commands in one click. Thanks in advance for any assistance you render.

[Thom Parker]

No code is provided for the "import_11()" and "import_pre_11()" functions.  Post the code for these functions.

Scripts in Acrobat are sandboxed for security reasons. The code for silently loading an image file (i.e. not showing the file browser) requires trust, which is one of the reasons that you need to call the two separate functions which each display the file browser.  The other reason for this setup is that neither of these functions provides the folder path for the loaded file.  Acquiring the folder path requires a different mechanism. 

Look at these articles:

https://acrobatusers.com/tutorials/popup_windows_part4/

https://www.pdfscripting.com/public/Trust-and-Privilege-in-Acrobat-Scripts.cfm

[Kelvin3054731488h1]

Thanks for responding.  I will add my script below.  I must admit, I am totally new to javascript and both of those links you sent me does me no justice.  I have read over them but don't understand anything on those pages.   Hopefully my script below can shine some light on my issues.

Under Button Properties/Run A Javascript, I listed:

event.target.buttonImportIcon();

if (app.viewerVersion < 11) {

import_pre_11();

} else {

import_11();

}

Then under Javascript/Document Javascript; Script Name: Import_file

// Initialize attachment number

attachment_num = 1;

// Initial location of file attachment icon

// The x value is incremented below

var oFAP = {x_init: -72, x: -72, y: -72}; // Below lower-left corner of the page

function import_pre_11() {

if (app.viewerType === "Reader") {

app.alert({

cMsg: "You must user Reader version 11 or later to attach files to this form.",

cTitle: "Attach File Error",

nIcon: 3,

nType: 0

});

return;

}

// Prompt user to import a file

app.alert({

cMsg: "Click the OK/Open button after selecting the file from your system that you want to attach.",

cTitle: "Attach File",

nIcon: 3,

nType: 0

});

try {

var rc = this.importDataObject("Attachment" + attachment_image);

if (rc) {

attachment_num += 1;

app.alert({

cMsg: "Attachment successful.\r\rOpen the Attachments panel to access the attached file(s).",

cTitle: "Attachment Successful",

nIcon: 3,

nType: 0

});

} else {

app.alert({

cMsg: "Attachment cancelled.",

cTitle: "Attachment Cancelled",

nIcon: 3,

nType: 0

});

}

} catch (e) {

app.alert({

cMsg: "Could not attach file.",

cTitle: "Could not attach file",

nIcon: 3,

nType: 0

});

}

}

function import_11() {

try {

var annot = addAnnot({

page: event.target.page,

type: "FileAttachment",

author: "Form user",

name: "File Attachment",

point: [oFAP.x, oFAP.y],

contents: "File attachment on: " + util.printd("yyyy/mm/dd HH:MM:ss", new Date()),

attachIcon: "Paperclip"

});

if (annot) app.alert("Attachment successful.",3);

oFAP.x += 18; // Increment the x location for the icon

} catch (e) {

app.alert({

cMsg: "Could not attach file.\r\rPlease report this error.",

cTitle: "File attachment error",

nIcon: 3,

nType: 0

});

}

}

[Thom Parker]

The scripts are exactly what I suspected.  Each adds a different type of attachment.  

The test for the version number is unnecessary. A more important factor is whether the viewer is Acrobat Pro or Reader. The "import_pre_11()" function can't be used in Reader on any version, because Reader can't import real file attachments. 

To do both actions (display and import) with a single file select requires the scripts to be executed from a trusted location.

Document scripts are not generally trusted locations.

There are a few options, but the 2 simplest are

1.  Create a folder level script and define your functions as "app.trustedFunction()".  This is what I'd do. Anyone who uses the form must also install this folder level JavaScript file into Acrobat. 

2. Put all the code into the MouseUp script (no function calls). Then add the file to the list of trusted documents in the Enhanced Security Preference.  Anyone who wants to use the file will need to add it to the Enhanced Security Preference on thier system. 

Now, the functions you have, "import_11()" and "import_pre_11()" won't work. New code will need to be written to use the "field.browseForFileToSubmit()" function to acquire the file path and then use this path to display the preview and import the file attachment. 

[Kelvin3054731488h1]

Apparantly something has changed in the Reader software.  The script I have actually does work with Reader.  I tested it by closing the file in Acrobat, opening it in Reader and everything functions well.  I also sent it to some of my buddies.  Everyone I sent it to only has Reader, but still was able to fill it out, and submit the form back to me.  No issues were found. 

When testing with Reader this is what happens;
I first click my created button, and it opens a Browse(Select Image Path) window.  I then choose my file, click Open and then OK. Another box opens(Add Attachment) this time, again I choose the file, click Open and it finally says, Attachment Successful.  The thumbnail is left on the button and the image is attached to the file and can be seen under Attachments.  {See pic below for completed view}

But to reinterate on your question,  everyone will be using Reader only to fill out my forms.  So anything I send them must be finished, where they can click the button, find the pic/pdf on their desktop pc and it loads.  Then finish filling out the form and Submit.  Any additional stuff on their end is not an option.  So, now that we know Reader can initiate javascript like I am already using, can you send me something that will work, please.  I am going to attach a sample of the file, and gas receipt I use, so you can test it on your end.  If you don't mind, please send the script back to me, in laymans terms.  Again, I am new and have only learned by research.  So the java terms, will have me lost. 
Example: In the Mouse Up field type(blah, blah).  In the Document/Document Javascripts type(blah, blah) and in the edit area type(blah, blah).  

This will make things easier to understand form me.   Thanks again for helping.

[Thom Parker]

Nothing has changed in Reader. It is the  "import_pre_11()" function that cannot be used in Reader. You and all of people you sent it too are using Acrobat Reader DC, the  "import_11()" function that is being called. In fact, you don't need the "import_pre_11()" function at all. 

I state in the last comment that neither of these functions can be used for your purpose, which is to import and display with a single file browser popup. Paying attention to details is important. 

I'm not going to write the code for you (unless you want to pay me for it). But I will point you in the right direction. 

Add a hidden text field to your document. Set the options on this text field to  "Field is used for file selection"

Now this field can be used to acquire the file path to the file to attach.  Here's a link to the reference entry for the function you'll need:

https://opensource.adobe.com/dc-acrobat-sdk-docs/library/jsapiref/JS_API_AcroJS.html#browseforfileto...

Then use this file path to both set the button icon preview and to create the file attachment annotation. 

Note my previous comments about trust. These operations cannot be done in a document level script unless the document is trusted. 

[Kelvin3054731488h1]

I might need to pay you.  In all seriousness, Adobe Javascript seems so confusing to me.  I javascript on websites all the time, but trying to figure out coding to do things like this, blows my mind.  As of now, users are using the way I have done it, but its just the having to click on the box twice(1 for thumbnail and again for saving the file to the form) just bothers me.  So how much would it be for you to create the javascript for me??