Click here to Skip to main content
11,631,992 members (69,183 online)
Click here to Skip to main content

Tagged as

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

, 1 May 2014 CPOL 8.7K 3
Rate this:
Please Sign up or sign in to vote.
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.

<!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! Smile | :)

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); 
 }

License

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

Share

About the Author

Francis S Michael
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.

You may also be interested in...

Comments and Discussions

 
Questionfileupload controls Onchange event is not firing in case of IE Pin
Member 112771631-Dec-14 2:19
memberMember 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
memberuthay@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 
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    Rant Rant    Admin Admin   

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

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150728.1 | Last Updated 1 May 2014
Article Copyright 2014 by Francis S Michael
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid