Consistent UI Across Browsers For File Upload Control

As you all know, the File Upload control in ASP.Net is used to upload your favorite files to a server. One of the biggest challenges when using this control is UI issues. That is, this control is rendered differently in each of the browsers. Please see the following figures, each of them render the File Upload control in a different way in the various browsers. That is, the UI varies across the browsers.

Internet Explorer:

Chrome:

Firefox:

Code

So in this article, I'm showing how to avoid this problem and provide a consistent look and feel across all browsers. Just create an aspx file with the following code:

<!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() {
// Initiate the File Upload Click Event
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>

The following codebehind 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);
}

Code Explanation

I just have one text box (txtUploadFile) and a button (btnUpload) that simulates a File Upload control. Also I have here a File Upload Server Control (fileUploader) whose visibility is set to false. I just hook up the File Upload Server Control click event in the 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 you get a consistent UI for this control across all browsers.

Output

Internet Explorer

FireFox

Chrome

If you have any suggestions, shoot me your thoughts as comments! Happy coding!

Consistent UI Across Browsers For File Upload Control

Reactions

Comments