Multiple file attachment

HCL Domino Domino Forum
1

Hi All,

I want to attach multiple files to a document. I am using file upload control.

To generate this file upload control dynamicaly I’m using HTML 'input type=“file” ’ control. but i am not getting handle of it.

Plz help me how to save files selected using HTML control…?

is there any ActiveX Control for multiple file attachment?

or any other way for the same…?

Thanks in advance…

Yogesh

2

Subject: Multiple file attachment

You need to use the File upload control provided by domino Designer on the form. Domino doesn’t support coding the HTML yourself for the file upload control.

You can place more than one file upload control on a form, to be able to upload several files at once, or use the same file upload control to upload several files.

If you want to use the same file upload control to upload multiple files, use @Command([FileSave]) as the submit button, then the document will reopen in the browser after the file has been uploaded.

/Peter

3

Subject: Multiple file attachment - easy

just put “multiple” in the html tags other area.When you open in web it works fine.

Top tip in chrome you can drag and drop miltiple files on to the Choose Files button

4

Subject: Multiple file attachment

Try out below code where you are writing HTML control for file upload…

In place of “652573ec00245832” in the name=“” string write replica ID of the database

,and for “ebeac9eaf9f2db3a652573f7001d683f” write noteID for database…

last “0.36A” needs to keep on changing but if you will put same for all then also there is no problem…

5

Subject: RE: Multiple file attachment

Yogesh,

Our Domino web app allows the user to attach as many files as they wish (rather than a pre-defined number) before submitting the form. If that’s what you want, read on.

The basic idea came from the Stickman (www.the-stickman.com). You start with a single file-upload control and use Javascript to detect when it’s used. When that happens, you add the used control to a hidden array and create a new file-upload control to replace the original. The key is that you have to name the new control as Amit says (although I keep the entire name as-is, with no adverse effect).

You should come up with a way to let the user remove mistakes. If you get into a jam, I can post my code (I work for the government so my work is rightly public domain).

Also, you’ll need to change the “Maximum size of request content” setting on the “HTTP” subtab of the “Internet Protocols…” tab of the Web Configuration document for the server to 0. This allows an unlimited-size POST to the server. (You may not want to do this if your site is on the Internet rather than an Intranet.) If you don’t, the server will reject a submitted form if the combined attachments are too large (actually, it will do this already, if the one attachment is too big) - with a generic message that will leave your users mystified; your code will never get the chance to tell the user what went wrong.

6

Subject: RE: Multiple file attachment

The formatting (which is largely destroyed) and naming conventions are my own so if anyone disagrees with them, please blame only me. The comments are a mix of mine and Stickman’s.Also, I only have to support IE, so I may have “broken” some of Stickman’s code.

This code is on a Page element named “MultiSelector.js”. Pay attention to the i__FileInputsMaximum variable.

/* *********************************************************************** */

/** Convert a single file-input element into a ‘multiple’ input list.

**

** This function defines a class that will be instantiated as a global

** variable on the HTML document. The class wraps a collection of file input

** elements, with the newest one active and earlier ones displayed in a list

** with accompanying delete buttons.

**

** Usage:

** 1. Create a file input element (no name)

** eg.

** 2. Create a DIV for the output to be written to

** eg.

** 3. Instantiate a MultiSelector object, passing in the DIV and an (optional) maximum number of files

** eg. var MS_Attachments = new MultiSelector( document.getElementById( ‘files_list’ ), 3 );

** 4. Add the first element

** eg. MS_Attachments.addElement( document.getElementById( ‘first_file_element’ ) );

** 5. That’s it.

**

** You might (will) want to play around with the addListRow() method to make the output prettier.

**

** You might also want to change the line

** element.name = ‘file_’ + this.count;

** …to a naming convention that makes more sense to you.

**

** Licence:

** Use this however/wherever you like, just don’t blame me if it breaks anything.

**

** Credit:

** If you’re nice, you’ll leave this bit:

**

** Class by Stickman – http://www.the-stickman.com */

/* ----------------------------------------------------------------------- */

function MultiSelector( de_AttachmentTable )

{ this.de_AttachmentTable = de_AttachmentTable // Table that lists attachments

this.de_CurrentFileInput;				// Allows us to re-enable if delete returns us below limit

this.s__FileInputName     = '';			// 2008-Jan-31 EBM: Have to re-use name generated by Domino Designer

this.i__FileInputsCount   = 0;			// Count of file-input elements

this.i__FileInputsMaximum = 4;			// Maximum file-input elements allowed; -1 for unlimited

// --------------------------------------------------------------------------

// Add a new file-input element.

// --------------------------------------------------------------------------

this.addFileInputElement = function( de_FileInput )

{	var de_NextInput;

// ---------------------------------------------------------------------

// Ensure the new element is a file-input.

// ---------------------------------------------------------------------

	if( de_FileInput.tagName.toLowerCase() == 'input' && de_FileInput.type.toLowerCase() == 'file' )

// --------------------------------------------------------------

// Give the file input element a unique ID.

// 2008-Jan-31 EBM: We must use the name generated for the File

// Upload control by Domino Designer *for all subsequent

// file-input elements* or else the subsequent file attachments

// will not be saved. The unique ID must be handled via the “ID”

// attribute.

// --------------------------------------------------------------

	{	if( this.s__FileInputName == '' )

			this.s__FileInputName = de_FileInput.name;

		else

			de_FileInput.name = this.s__FileInputName;

		de_FileInput.id = 'FileInput_' + (this.i__FileInputsCount < 10 ? '0' : '') + this.i__FileInputsCount;

// --------------------------------------------------------------

// Add a property to the file-input element to store a reference

// to the HTML document’s instance of MultiSelector. This allows

// the event handler we’re going to add to the element to access

// its Attachments table, and its addFileInputElement and

// addListRow functions.

// --------------------------------------------------------------

		de_FileInput.MS_Attachments = this;

// --------------------------------------------------------------

// Also add a handler to the file-input element for the onchange

// event. In the handler, ‘this’ refers to the handler’s owner -

// the file-input element.

// The event handler first looks to see if the attachment is

// already in the table, clearing itself if the attachment is

// found.

// --------------------------------------------------------------

		de_FileInput.onchange = function()

		{	for( var i = 0; i < this.MS_Attachments.de_AttachmentTable.rows.length; i++ )

			{	if( this.value.toLowerCase() == this.MS_Attachments.de_AttachmentTable.rows(i).cells(1).innerHTML.toLowerCase() )

				{	// Cannot find a way to erase the displayed text.

					return;

				}

			}

// --------------------------------------------------------

// Create the next file-input element and insert it ahead

// of this file-input element (within whatever HTML element

// this file-input element resides).

// --------------------------------------------------------

			de_NextInput                  = document.createElement( 'Input' );

			de_NextInput.type             = 'file';

			de_NextInput.style.fontFamily = 'Arial';

			de_NextInput.style.fontSize   = '8pt';

			this.parentNode.insertBefore( de_NextInput, this );

// --------------------------------------------------------

// Using the file-input element’s reference to the HTML

// document’s instance of MultiSelector, call the method to

// set up and display the next file-input element.

// --------------------------------------------------------

			this.MS_Attachments.addFileInputElement( de_NextInput );

// --------------------------------------------------------

// Using the file-input element’s reference to the global

// instance of MultiSelector, “move” the current file-input

// element to the dislay list.

// --------------------------------------------------------

			this.MS_Attachments.addListRow( this );

			this.style.display  = 'none';

		}

// --------------------------------------------------------------

// If we’ve decided to limit the number of attachments and have

// reached maximum, disable de_FileInput.

// --------------------------------------------------------------

		if( this.i__FileInputsMaximum != -1 &&  this.i__FileInputsCount >= this.i__FileInputsMaximum )

			de_FileInput.disabled = true;

// --------------------------------------------------------------

// File-input element counter (for upper-limit checking only)

// --------------------------------------------------------------

		this.i__FileInputsCount++;

// --------------------------------------------------------------

// A reference to the most recent element, should the Delete

// button need to re-enable the element because we’ve returned

// below the limit.

// --------------------------------------------------------------

		this.de_CurrentFileInput = de_FileInput;

	}

}

// --------------------------------------------------------------------------

// Add a new row to the table of file attachments.

// --------------------------------------------------------------------------

this.addListRow = function( de_FileInput )

{	var de_DeleteIcon;

	var de_TableRow;

	var de_TableCell;

// --------------------------------------------------------------------

// Create a TR element to display the file-input element.

// --------------------------------------------------------------------

	de_TableRow = this.de_AttachmentTable.insertRow();

// --------------------------------------------------------------------

// Create a Delete icon that may be used to delete the attachment. Add

// two properties to the icon to store references to the file-input

// element and the table-row element. This gives us easy access to

// both if we need to delete the attachment.

// --------------------------------------------------------------------

	de_DeleteIcon              = document.createElement( 'Img' );

	de_DeleteIcon.src          = '/icons/vwicn038.gif';

	de_DeleteIcon.de_FileInput = de_FileInput;

	de_DeleteIcon.de_TableRow  = de_TableRow;

// --------------------------------------------------------------------

// Also add a handler to the Delete icon for the onclick event. In the

// handler, ‘this’ refers to the handler’s owner - the Delete icon.

// --------------------------------------------------------------------

	de_DeleteIcon.onclick = function()

	{

// --------------------------------------------------------------

// Remove the file-input element (and any children that we may

// have forgotten about) from the HTML document.

// --------------------------------------------------------------

		this.de_FileInput.removeNode( true );

// --------------------------------------------------------------

// Remove the table-row element (and its cells, and their

// contents) from the attachments table.

// --------------------------------------------------------------

		this.de_TableRow.removeNode( true );

// --------------------------------------------------------------

// Using the Delete icon’s reference to the file-input element,

// use the file-input element’s reference to the HTML document’s

// instance of MultiSelector to decrement the count of file-input

// elements.

// --------------------------------------------------------------

		this.de_FileInput.MS_Attachments.i__FileInputsCount--;

// --------------------------------------------------------------

// Using the property we added when creating the Delete icon,

// retrieve the file-input element. Then use the property we

// added to the file-input element to retrieve the HTML

// document’s instance of MultiSelector and re-enable the current

// file input element (in case it was disabled due to a maximum).

// --------------------------------------------------------------

		this.de_FileInput.MS_Attachments.de_CurrentFileInput.disabled = false;

	}

// --------------------------------------------------------------------

// Add the Delete icon and the file-input element’s display value to

// the table row.

// --------------------------------------------------------------------

	de_TableCell             = de_TableRow.insertCell();

	de_TableCell.style.width = 20;

	de_TableCell.appendChild( de_DeleteIcon );

	de_TableCell             = de_TableRow.insertCell();

	de_TableCell.innerHTML   = de_FileInput.value;

}

}

How ever you generate the Head section, you’ll need to include the page:

On your page, add a File Upload control and use the HTML tab of the properties dialog box to give it the id “FileInput_00”.

Below the control, add the following pass-through HTML:

This is where the user can see if they’ve already added a file, or remove a mistake.

Normally, I avoid embedding Javascript on Forms like the plague, but I had to here - I can’t remember what obscure problem it solved. This pass-through HTML is immediately below the HTML Table but you may be able to move the variable declaration to JS Header and the variable initialization to the onload() event (beware: IE replaces onload() code in rare situations).

(Note: the capitalized prefix indicates a global Javascript variable whereas lowercase indicates local variables. The “de_” prefix refers to HTML document elements - usually obtained via document.getElementById(…).)

7

Subject: RE: Multiple file attachment

Hi,

Thanks for this code that works very well in IE.

FYI I tested it with Firefox and it works but there is a bug displaying the table: no table is displayed and each new fileinput field is added below the previous.

One question: I want to create a list of the files attached in a separated field. Do you think it’s possible to add some lines in your code to do that and where exactly?

Thanks & regards

8

Subject: RE: Multiple file attachment

Hello Eric,

Thanks for giving such a great information…

Its really very helpful to me…

Thanks again…

9

Subject: Multiple file attachment

Just an update to this post, I’ve found that this plugin works better than the one suggested (especially for jQuery users!) and it works fine in Firefox as well as IE.

jQuery.MultiFile.js check out the following url for details.

10

Subject: RE: Multiple file attachment

I’ve fixed this code so it works in Firefox too - please see below (Thanks for posting it. It saved me a lot of time. )

function MultiSelector( de_AttachmentTable )

{ this.de_AttachmentTable = de_AttachmentTable // Table that lists attachments

this.de_CurrentFileInput; // Allows us to re-enable if delete returns us below limit

this.s__FileInputName = ‘’; // 2008-Jan-31 EBM: Have to re-use name generated by Domino Designer

this.i__FileInputsCount = 0; // Count of file-input elements

this.i__FileInputsMaximum = 4; // Maximum file-input elements allowed; -1 for unlimited

// --------------------------------------------------------------------------

// Add a new file-input element.

// --------------------------------------------------------------------------

this.addFileInputElement = function( de_FileInput )

{ var de_NextInput;

// ---------------------------------------------------------------------

// Ensure the new element is a file-input.

// ---------------------------------------------------------------------

if( de_FileInput.tagName.toLowerCase() == ‘input’ && de_FileInput.type.toLowerCase() == ‘file’ )

// --------------------------------------------------------------

// Give the file input element a unique ID.

// 2008-Jan-31 EBM: We must use the name generated for the File

// Upload control by Domino Designer *for all subsequent

// file-input elements* or else the subsequent file attachments

// will not be saved. The unique ID must be handled via the “ID”

// attribute.

// --------------------------------------------------------------

{ if( this.s__FileInputName == ‘’ )

this.s__FileInputName = de_FileInput.name;

else

de_FileInput.name = this.s__FileInputName;

de_FileInput.id = ‘FileInput_’ + (this.i__FileInputsCount < 10 ? ‘0’ : ‘’) + this.i__FileInputsCount;

// --------------------------------------------------------------

// Add a property to the file-input element to store a reference

// to the HTML document’s instance of MultiSelector. This allows

// the event handler we’re going to add to the element to access

// its Attachments table, and its addFileInputElement and

// addListRow functions.

// --------------------------------------------------------------

de_FileInput.MS_Attachments = this;

// --------------------------------------------------------------

// Also add a handler to the file-input element for the onchange

// event. In the handler, ‘this’ refers to the handler’s owner -

// the file-input element.

// The event handler first looks to see if the attachment is

// already in the table, clearing itself if the attachment is

// found.

// --------------------------------------------------------------

de_FileInput.onchange = function()

{ for( var i = 0; i < this.MS_Attachments.de_AttachmentTable.rows.length; i++ ){

if( this.value.toLowerCase() == this.MS_Attachments.de_AttachmentTable.rows[i].cells[1].innerHTML.toLowerCase() )

{ // Cannot find a way to erase the displayed text.

return;

}

}

// --------------------------------------------------------

// Create the next file-input element and insert it ahead

// of this file-input element (within whatever HTML element

// this file-input element resides).

// --------------------------------------------------------

de_NextInput = document.createElement( ‘Input’ );

de_NextInput.type = ‘file’;

de_NextInput.style.fontFamily = ‘Arial’;

de_NextInput.style.fontSize = ‘8pt’;

this.parentNode.insertBefore( de_NextInput, this );

// --------------------------------------------------------

// Using the file-input element’s reference to the HTML

// document’s instance of MultiSelector, call the method to

// set up and display the next file-input element.

// --------------------------------------------------------

this.MS_Attachments.addFileInputElement( de_NextInput );

// --------------------------------------------------------

// Using the file-input element’s reference to the global

// instance of MultiSelector, “move” the current file-input

// element to the dislay list.

// --------------------------------------------------------

this.MS_Attachments.addListRow( this );

this.style.display = ‘none’;

}

// --------------------------------------------------------------

// If we’ve decided to limit the number of attachments and have

// reached maximum, disable de_FileInput.

// --------------------------------------------------------------

if( this.i__FileInputsMaximum != -1 && this.i__FileInputsCount >= this.i__FileInputsMaximum )

de_FileInput.disabled = true;

// --------------------------------------------------------------

// File-input element counter (for upper-limit checking only)

// --------------------------------------------------------------

this.i__FileInputsCount++;

// --------------------------------------------------------------

// A reference to the most recent element, should the Delete

// button need to re-enable the element because we’ve returned

// below the limit.

// --------------------------------------------------------------

this.de_CurrentFileInput = de_FileInput;

}

}

// --------------------------------------------------------------------------

// Add a new row to the table of file attachments.

// --------------------------------------------------------------------------

this.addListRow = function( de_FileInput ){

var de_DeleteIcon;

var de_TableRow;

var de_TableCell;

// --------------------------------------------------------------------

// Create a TR element to display the file-input element.

// --------------------------------------------------------------------

rowIndex = this.de_AttachmentTable.rows.length;

de_TableRow = this.de_AttachmentTable.insertRow(rowIndex);

//rowIndex = rowIndex + 1;

// --------------------------------------------------------------------

// Create a Delete icon that may be used to delete the attachment. Add

// two properties to the icon to store references to the file-input

// element and the table-row element. This gives us easy access to

// both if we need to delete the attachment.

// --------------------------------------------------------------------

de_DeleteIcon = document.createElement( ‘Img’ );

de_DeleteIcon.src = ‘/icons/vwicn038.gif’;

de_DeleteIcon.de_FileInput = de_FileInput;

de_DeleteIcon.de_TableRow = de_TableRow;

// --------------------------------------------------------------------

// Also add a handler to the Delete icon for the onclick event. In the

// handler, ‘this’ refers to the handler’s owner - the Delete icon.

// --------------------------------------------------------------------

de_DeleteIcon.onclick = function()

{

// --------------------------------------------------------------

// Remove the file-input element (and any children that we may

// have forgotten about) from the HTML document.

// --------------------------------------------------------------

//this.de_FileInput.removeNode( true );

this.de_FileInput.parentNode.removeChild(this.de_FileInput);

// --------------------------------------------------------------

// Remove the table-row element (and its cells, and their

// contents) from the attachments table.

// --------------------------------------------------------------

//this.de_TableRow.removeNode( true );

this.de_TableRow.parentNode.removeChild(this.de_TableRow);

// rowIndex = rowIndex -1;

// --------------------------------------------------------------

// Using the Delete icon’s reference to the file-input element,

// use the file-input element’s reference to the HTML document’s

// instance of MultiSelector to decrement the count of file-input

// elements.

// --------------------------------------------------------------

this.de_FileInput.MS_Attachments.i__FileInputsCount–;

// --------------------------------------------------------------

// Using the property we added when creating the Delete icon,

// retrieve the file-input element. Then use the property we

// added to the file-input element to retrieve the HTML

// document’s instance of MultiSelector and re-enable the current

// file input element (in case it was disabled due to a maximum).

// --------------------------------------------------------------

this.de_FileInput.MS_Attachments.de_CurrentFileInput.disabled = false;

}

// --------------------------------------------------------------------

// Add the Delete icon and the file-input element’s display value to

// the table row.

// --------------------------------------------------------------------

de_TableCell = de_TableRow.insertCell(0);

de_TableCell.style.width = 20;

de_TableCell.appendChild( de_DeleteIcon );

de_TableCell = de_TableRow.insertCell(1);

de_TableCell.innerHTML = de_FileInput.value;

}

}

11

Subject: RE: Multiple file attachment

Incredible!

I just had a requirement for multi-file attachment this week and came across this. Just tried it out in Firefox 3.6.8 and IE 7.0.6002 on a Domino 8.5 server and it works great!

I had tried to get the JQuery version working, but with no luck (and it requires six or so JS libraries to be loaded).

This is a far simpler and elegant Domino focused solution.

Thanks to Eric and Leo for all their work on this!

Jimmy

12

Subject: Multiple file attachment

you can use one file upload control to attach multiple files

13

Subject: RE: Multiple file attachment

But i want to attach files before saving the document…