Introduction
Every ASP.NET developer must have used the ASP.NET File Upload control. The problem with this control is, it was rendered slightly differently in most popular browsers. In this tip, I am going to show a little alternative for this problem.
Using the Code
Just copy the below code in an ASPX file.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Uploader Demo</title>
<script src="Scripts/jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
function hookFileClick() {
document.getElementById('fileUploader').click();
}
function fnOnChange(obj)
{
document.getElementById("txtUploadFile").value = obj.value;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" runat="server"
id="txtUploadFile" disabled="disabled" />
<input type="button" runat="server"
id="btnUpload" value="Browse"
onclick="hookFileClick()" />
<asp:Button runat="server"
ID="btnUploadFileToServer"
Text="Upload File To Server"
OnClick="btnUploadFileToServer_Click" />
<asp:FileUpload runat="server"
ID="fileUploader" Style="visibility: hidden;"
onchange="fnOnChange(this);" />
</div>
</form>
</body>
</html>
I just have one text box (txtUploadFile) and a button (btnUpload) which simulates like a File upload control. Also, I have a file upload server control (fileUploader) in which the visibility is set as false. I just hook up the file upload server control click event in first button's click event. So when you click the first button, it will open the file open dialog. These are all done using JavaScript. As a result, what you get is a consistent UI for this control.
EDIT
I have slightly changed the code. That is, I have added "onchange" event for the File Upload Control. Initially, I have attached the event, which is not working in Internet Explorer 11. This one works fine in all browsers! :)
The below code-behind code is used to save the file into the server:
protected void btnUploadFileToServer_Click(object sender, EventArgs e)
{
string strFileName = fileUploader.FileName;
fileUploader.SaveAs("d:\\Somepath\\ " + strFileName);
}
