Click here to Skip to main content
15,868,016 members
Articles / Web Development / ASP.NET
Tip/Trick

ASP.NET File Upload Control - Provide Same Look and Feel in All Browsers

Rate me:
Please Sign up or sign in to vote.
4.00/5 (1 vote)
1 May 2014CPOL 26.3K   3   6
ASP.NET File Upload Control- Provide Consistant Look and Feel in All Browsers

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.

HTML
<!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>   

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:

C#
protected void btnUploadFileToServer_Click(object sender, EventArgs e)
 { 
      string strFileName = fileUploader.FileName; 
      fileUploader.SaveAs("d:\\Somepath\\ " + strFileName); 
 }

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
India India
Hi All, I am Francis from India. Working as a Senior Software Engineer. I have 6+ Years of experience in ASP.Net and C#/VB.Net. Also founder of ASPDotNetChamp, where i blog my day to day ASP.Net Experiences, Problems and Interview Questions.

Comments and Discussions

 
Questionfileupload controls Onchange event is not firing in case of IE Pin
Member 112771631-Dec-14 2:19
Member 112771631-Dec-14 2:19 
AnswerRe: fileupload controls Onchange event is not firing in case of IE Pin
Francis S Michael2-Dec-14 8:54
professionalFrancis S Michael2-Dec-14 8:54 
QuestionOnchange event Pin
uthay@y7mail.com23-Nov-14 11:47
uthay@y7mail.com23-Nov-14 11:47 
AnswerRe: Onchange event Pin
Francis S Michael2-Dec-14 8:55
professionalFrancis S Michael2-Dec-14 8:55 
QuestionIssue in case of IE11 Pin
Sonu Rajput1-May-14 19:23
professionalSonu Rajput1-May-14 19:23 
not displaying file name into textbox for the first file selection in internet explorer.
AnswerRe: Issue in case of IE11 Pin
Francis S Michael2-Dec-14 8:55
professionalFrancis S Michael2-Dec-14 8:55 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.