Page Comparison

There are a few cool things you can do with attachments, provided you are not scared of a little JavaScript.  Hopefully I have provided enough context for those of you that are not fluent in JavaScript (before you scream "geek" - remember that I am helping you).  If anything is unclear please comment and I will fix-up the article until it is.

Article Contents

Get Attachment File Name

Render Submitted Attachment in Later Stage

Provide link to attached file

Allowing Users to Attach Multiple Attachments

Provide a Summary of Attachments

Reading the Content of an Uploaded File

Include Attachment URL in Email Sent as Submit Activity

You can use getValue() to retrieve the attachment object and display filename in your form.

var filename = get(BO.F_Attachment.getValue(), "fileName");

"F_Attachment" is the ID of the Attachment object that you created.  You can check out the ID from the Advanced Tab of the item properties.

1. Create an Attachment object (id = F_Attachment)

2. Create an HTMLFragment

3. Place this code in the HTML FragmentonShowevent:

var attachmentid = BO.F_Attachment.getValue().id;
var url = "/forms/secure/org/run/service/ContentStorageService/" + attachmentid;

item.setContent("<img src='" + url + "'></url>");

It is important to note that the content of an attachment cannot be displayed until the form has been submitted.  The URL here is using the REST API to get the content of the attachment, but until the form has been submitted the attachment is not available on the server.

4. When your form gets to the next stage you will now see the image rendered!  You may want to consider hiding the HTMLFragment widget until the next stage.

Note: As of version 8.6.4 the URL used to access attached files has changed.  The format is now "/forms/secure/org/data/<app_id>/<form_id>/attachment/<attachment_uid>.  The parts can be dynamically determined: app.getUID(), form.getId() and BO.F_Attachment.getValue().uid.  This new approach should be applied to the rest of the content in this article for any applications built using 8.6.4 or higher.  The old URL still works, but may be removed in the future.

1. Create an Attachment object (id = F_Attachment)

2. Create a Web Link object (in the Specialized palette)

3. Place this code in theonShowevent:

var attachmentid = BO.F_Attachment.getValue().id;

var url = "/forms/secure/org/run/service/ContentStorageService/" + attachmentid;

item.setDisplayValue(BO.F_Attachment.getValue().fileName);
item.setLinkValue(url);

4. When the page where the link is rendered the link display will be set to the filename and clicking on the link will open/download the file.

You can access the file name at anytime even before the form has been submitted, but you cannot create a valid link to the attachment until the form has been submitted.

You can place the Attachment item within a table.  Then I would recommend having two single line fields; one for the filename and the other for the attachment ID.  In theonItemChangeevent of the attachment item you can use the following JavaScript to set the field values:

BO.F_SingleLine0.setValue(BO.F_Attachment0.getValue().fileName.replace("C:\\fakepath\\", ""));
BO.F_SingleLine1.setValue(BO.F_Attachment0.getValue().id);