Introduction:
Uploading files is a common behavior of any web application. In this article I will explain how to upload multiple files using ASP.NET Client Callbacks.
Creating the User Interface:
I am going to create a Gmail like interface for attaching files. If you are not familiar with that approach then I suggest that you create a Gmail account and check it out yourself. For those lazy people who don’t want to create an account here is the small description of the procedure.
The page consists of a single HREF link which allows creating input FILE elements to attach multiple files. All the steps are performed by using JavaScript. Let’s dive into the code and see what is going on.
Here is the HREF link I was talking about:
<a href="#" onclick="attachFile()">Attach a file</a>
The attachFile function creates the INPUT FILE element and appends to the existing DIV element.
|
function attachFile()
{
var fu = document.createElement("INPUT");
fu.type = "file";
var br = document.createElement("<BR>");
document.getElementById("fileDivBox").appendChild(fu);
document.getElementById("fileDivBox").appendChild(br);
} |
The document.createElement(“INPUT”) creates the TextBox by default so, we need to explicitly specify [object].type = “file” to make it a FILE element. The fileDivBox is a simply DIV element placed inside the ordered list element as shown below:
|
<ol>
<li style="list-style:none">
<div id="fileDivBox" />
</li>
</ol> |
Uploading the File:
The actual file upload is performed by the uploadFile function which is called when the “Upload” file button is clicked.
<input type="button" value="Upload" onclick="uploadFile()" />
|
var selectedFiles = '';
function ReceiveServerData(response)
{
alert(response);
}
function uploadFile()
{
var fileList = document.getElementById("fileDivBox").getElementsByTagName("INPUT");
for(i=0; i<fileList.length;i++)
{
selectedFiles += fileList[i].value + "|";
}
CallServer(selectedFiles,'');
} |
The selectedfiles is a global JavaScript variable which is used to collect all the selected files separated by the “|” sign. Once, all the files are collected they are sent to the server using client callbacks.
The Server Side Code:
The server side code starts with implementing the ICallbackEventHandler. I am not going to explain how to register callbacks as I have done so in almost all of my client callback articles. Instead I will jump to the GetCallbackResult method where I used the “|” separated list and upload the files one by one.
|
public void RaiseCallbackEvent(string eventArgument)
{
string[] files = (eventArgument.TrimEnd('|')).Split('|');
WebClient client = new WebClient();
foreach (string file in files)
{
client.UploadFile("http://localhost:1566/FileServer.aspx", "POST", file);
}
} |
The WebClient class in ASP.NETprovides necessary methods to upload the file. The WebClient’s UploadFile method is used to upload a file to a URI from where it can be uploaded to the server. In this example the files are uploaded to the FileServer.aspx page and from there they are sent to the server’s folder.
Let’s check out the code on FileServer page which is used to upload the files to the server’s folder.
|
protected void Page_Load(object sender, EventArgs e)
{
// server folder
string path = @"C:\UploadedFiles\";
string[] keys = Request.Files.AllKeys;
foreach(String key in keys)
{
HttpPostedFile file = Request.Files[key];
file.SaveAs(path + file.FileName);
}
} |
Not complicated at all right!
Simply, iterate through the Request.Files.AllKeys collection and get all the keys. Finally, iterate though the keys and get the file and then upload the file to the server.
Conclusion:
Uploading files can be a tedious task in web applications. In this article I discussed how to upload multiple files using ASP.NET 2.0 Client Callbacks. If you are uploading large files then I recommend uploading them in bits and pieces instead of uploading the whole file at one go.