Multi-Selecting Files in ASP.NET

  • Thread starter Thread starter Guest
  • Start date Start date
G

Guest

Does anyone know of a C#/ASP.NET Open File dialog that I can use in an
aspx page that allows multiselect? I need to be able to select and upload
numerous files.
Is there a reason why MS has made this so difficult? I am willing to pay
for such a control.
 
Chris,

It's not MS that made it so difficult, but the HTML standard that
dictates how file upload controls are supposed to work.

If you want to do this, you will have to dynamically create file input
elements with javascript, and then determine how many elements were sent to
the server (you would name the elements file1, file2, etc, etc, to fileN,
then you would check for the existence of elements 1, 2 .. N).

Either that, or embed a control in the page (ActiveX or .NET) that will
allow you to bring up a dialog that allows you to select multiple files, and
upload all of them (however, you will have to do the same thing, either
upload them in separate requests, or create separate ids for each request).

Hope this helps.
 
Nick,

Are you sure of that JavaScript and if so, can you give than a sample for
me. In my knowledge that is not possible with JavaScript and why Microsoft
should remove those elements from VB script before it was allowed on
Internet..

So when you have that sample, I would be glad to have that (serious).

For the rest I would have written it almost the same with other words of
course.

Cor
 
Cor,

Here is the code that shows you how to add a new file upload element
dynamically. The important part is near the call to createElement. It
creates the input element, and sets the input type to "file", as well as
setting the name and the id. The rest isn't as important. Basically, it is
embedded in a table that I add new rows to dynamically (with a button
outside the table of course), and I set the id and name according to the
number of rows in the table.

You still have to process the files on the other side. You have to
decide on a name for the input elements, and then check for those elements
(which will have a number appended to them). When the element doesn't
exist, you can stop processing.

Here is the code for the Javascript:

//////////////////////////////////////////////////
//
// function AddFileUpload()
//
// Nicholas Paldino 4/26/2002
//
// Adds a new row for a file upload dialog to the page.
//
//////////////////////////////////////////////////
function AddFileUpload()
{
// Get the appropriate table body first.
var pobjTableBody = document.all("filesToUploadBody");

// The id that will be used.
var pintRowNumber = pobjTableBody.rows.length;

// Now create a row.
var pobjNewRow = document.createElement("tr");

// Set the style of the row based on whether or not it is odd or even.
SetRowStyle(pobjNewRow.style, pintRowNumber);

// Create the two columns, the one with the file input and the
// one with the alternate name.
var pobjFileCell = document.createElement("td");
var pobjAlternateFileNameCell = document.createElement("td");

// The file header and the alternate file elements.
var pobjFileHeader = document.all("fileHeader");
var pobjAlternateNameHeader = document.all("alternateNameHeader");

// The table itself.
var pobjTable = document.all("filesToUpload");

// Now create the file element and set the properties.
var pobjFileInput = document.createElement("input");
pobjFileInput.type = "file";
pobjFileInput.id = ("file" + pintRowNumber);
pobjFileInput.name = pobjFileInput.id;
pobjFileInput.style.width = (pobjFileHeader.clientWidth -
(pobjTable.cellPadding * 2)) + "px";

// Now create the alternate file name.
var pobjAlternateFileNameInput = document.createElement("input");
pobjAlternateFileNameInput.type = "text";
pobjAlternateFileNameInput.id = ("alternateName" + pintRowNumber);
pobjAlternateFileNameInput.name = pobjAlternateFileNameInput.id;
pobjAlternateFileNameInput.style.width =
(pobjAlternateNameHeader.clientWidth - (pobjTable.cellPadding * 2)) + "px";

// Add the file input and the filename box to the appropriate cells.
pobjFileCell.appendChild(pobjFileInput);
pobjAlternateFileNameCell.appendChild(pobjAlternateFileNameInput);

// Add the cells to the row.
pobjNewRow.appendChild(pobjFileCell);
pobjNewRow.appendChild(pobjAlternateFileNameCell);

// Add the row to the body.
pobjTableBody.appendChild(pobjNewRow);

// That's all folks.
return;
}

Hope this helps.
 
Back
Top