Change How Attachments Displayed on Web Pages

Mindwatering Incorporated

Author: Tripp W Black

Created: 07/24/2011 at 12:01 AM


Notes Developer Tips

How to Handle Attachments on the Web.

There are basically two options:
1. Put a FileUpload control above the RTF field. Then let the users upload. Domino will attach them and put them in the RTF field immediately below.
(Java Control)
This has one big bonus and a minus. The big bonus is that the attachment is properly in a field like you probably want. This makes it great for re-use w/the Notes Client.
One minus is that the Java Control may not work because of a workstation's lack or version of Java. The next minus is that if re-editing on the web, the attachments with a RTF gets clunky with the delete checkboxes at the bottom to remove.

2. Use File Upload with computed text to display existing attachments for removal. It's more complicated, but gives you more flexibility for a web app. Also, you can still let Domino do the attachment handling for removal/detaching without having to write any agent code which is nice -- work with the product. See below for the steps to do this.

Update 2010:
3. With 8.5x and XPages, the File Upload control works great right out of the box. However, your form must be switched from a "classic" form to an "XPage" one.

Option 2 Details:
#2 and #3 source from post with credit to Alan H.

1. Create a hidden $V2AttachmentOptions text, computed for display field, with following formula code:
@If(@IsDocBeingEdited; "1"; "0");

2. Create Computed Text to Display the Attachments:
@Implode("<a href=\"" + @Text(@DocumentUniqueID) + "/$file/" + @AttachmentNames + "\">"+@AttachmentNames + "</a>"; "<br>");

3. Create Computed Text to display the attachments for detaching (removal) from the document at save:
@Implode("<input type=\"checkbox\" name=\"%%Detach\" value=\""+@AttachmentNames+"\">"+@AttachmentNames; "<br>");

My addition to this logic:
Say you want to display the attachments in different spots. In other words, you want multiple FileUpload elements and want to see the attachments in different groups.
What you do is create different FileUpload controls, each with a unique HTML ID, that each have a field created that stores each attachment name. Then when the document is saved, instead of using @AttachmentNames, you use the field.

For a File Upload with ID, FU1, a field FU1Nms, the attachment section might look something like this:

tmpreadurl:="<a href=\"/" + @WebDbName + "/0/" + @Text(@DocumentUniqueID) + "/$FILES/";
tmpdetachurlmid:="\"> ";
tmpreadurlclose:= "</a><br> ";
tmpdetachurlclose:= " <br>";
tmpdetachurl:= "<input type=checkbox name=\"%%Detach\" value=\"";
tmpurl:= @If(@IsDocBeingEdited; tmpdetachurl; tmpreadurl);
tmpmid:= @If(@IsDocBeingEdited; tmpdetachurlmid; tmpreadurlmid);
tmpclose:= @If(@IsDocBeingEdited; tmpdetachurlclose; tmpreadurlclose);

@For(n := 1; n <= @Elements(tmpnm); n := n + 1;
urls:= urls + (tmpurl + tmpnm[n] + tmpmid + tmpnm[n] + tmpclose) );

JavaScript Logic:

function DoRightBack(mystring, smstr) {
return mystring.substring(mystring.lastIndexOf( smstr )+1,mystring.length);
function ProcessFileUpload(funum) {
var a1 = 'FU' + funum + '';
var a2 = 'FU' + funum + 'Nms';
var fu = document.getElementById(a1);
var funm = document.getElementById(a2);
if (fu == null || funm == null) {
// do nothing
return false;
} else {
var trimchar = '\\';
var attachnm = DoRightBack(fu.value, trimchar);
if (funm.value =='') {
funm.value = attachnm;
} else {
funm.value = funm.value + ';' + attachnm;

function ProcessFileUploads() {

previous page