Problem while uploading files
I've made a web user control to upload multiple files onto the server. The control is designed in such a way that the user can add as many file uploaders as he can he by clicking on add button.
The controls get added at the runtime using JAVASCRIPT
<script language="javascript" type="text/javascript">
function Button_onclick() {
var filebutton = '<br> <input name="File" type="file" lang="en-us" style="width: 248px"/>';
document.getElementById('fileUploader').insertAdjacentHTML("beforeEnd", filebutton);
}
</script>
This is the control which I am adding on the button click
<p id="fileUploader" ><input type="file" lang="en-us" name="File" style="width: 248px"/></p></td>
...............................................................................
...............................................................................
<input id="btn_AddMore" type="button" value="Add More" onclick="return Button_onclick();"/>
But when i click on upload it does'nt upload a single file. I am using a loop that will use HttpCollectionList object to count the number of controls and upload accordingly.
protected void UploadFiles()
{
/// Obtain the uploaded files list
HttpFileCollection fileList = HttpContext.Current.Request.Files;
Response.Write(fileList);
/// Define the new message to be displayed
StringBuilder uploadMsg = new StringBuilder("Upload files as follows: " + "<br>");
/// Upload Each file inthe file list
for (int i = 0; i < fileList.Count; i++)
{
/// Obtain the current uploaded file
HttpPostedFile hPostedFile = fileList[i];
string szFileName = Path.GetFileName(hPostedFile.FileName);
if (!string.IsNullOrEmpty(szFileName))
{
///upload the file
hPostedFile.SaveAs(MapPath("./HardFiles/UploadedFiles"));
///add the file to the database
uploadMsg.Append("File name:" + szFileName + "<br>");
}
}
}
Everytime the value of fileList.Count is 0 no matter how many controls I add. Can someone help me with this??
Thanks in Advance
# 1 Re: Problem while uploading files
Why do you not use the cross-browser compatible code I suggested in my post in your other thread? Your JavaScript will only work in Microsoft browsers. Also, your current code does not support multiple files because all fields have the same name.
Make sure your form has the enctype="multipart/form-data" attribute, or files will not be included.
Edit - Here's a complete example of what it could look like:
<%@ Page Language="C#" Debug="true" %>
<script type="text/C#" runat="server">
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
if (Request.Files.Count > 0)
{
for (int i = 0; i < Request.Files.Count; i++)
{
HttpPostedFile file = Request.Files[i];
string info = String.Format("{0} ({1} bytes)",
file.FileName,
file.ContentLength);
bltFiles.Items.Add(info);
}
pFileInfo.Visible = true;
}
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript - Dynamic form fields</title>
<script type="text/javascript">
var i = 2;
function newField(before) {
var p = document.createElement("p");
var id = "field-file-" + i;
var input = document.createElement("input");
input.id = id;
input.name = "file-" + i;
input.type = "file";
var label = document.createElement("label");
label["for"] = id;
var a = document.createElement("a");
a.href = "#";
a.onclick = function () { before.parentNode.removeChild(p); };
a.appendChild(document.createTextNode("(Remove)"));
label.appendChild(document.createTextNode("File #" + i));
p.appendChild(label);
p.appendChild(input);
p.appendChild(document.createTextNode(" "));
p.appendChild(a);
before.parentNode.insertBefore(p, before);
i++;
}
</script>
<style type="text/css">
label {
display: block;
float: left;
font-weight: bold;
width: 5em;
}
</style>
</head>
<body>
<form action="Default.aspx" enctype="multipart/form-data" method="post" runat="server">
<p id="pFileInfo" visible="false" runat="server">
Submitted files:
<asp:BulletedList ID="bltFiles" runat="server" />
</p>
<p>
<label for="field-file-1">File #1</label>
<input id="field-file-1" name="file-1" type="file" />
</p>
<p>
<input onclick="newField(this.parentNode)" type="button" value="Add file field" />
<input type="submit" value="Submit form" />
</p>
</form>
</body>
</html>
# 5 Re: Problem while uploading files
It's as much on the client as it can be.
You have to handle the received files on the server or they'd never leave the client. The only code that is on the server side is the C# code that loops through each received file. My example simply outputs the names and sizes of all the files, but you would store the files or whatever you want to do with them on the server.
The part that adds fields can be handled both on server and client, but my script handles it on the client (otherwise a round-trip to the server would be required which makes state caching necessary, so it's better this way unless you're aiming for clients with JavaScript disabled.)
