Click here to Skip to main content
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
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 used the ASP.Net File Upload control. The problem with this control is, it was rendered slightly different in most popular browsers. In this article, 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 language="javascript" type="text/javascript">
        function hookFileClick() {
            // Initiate the File Upload Click Event
            document.getElementById('fileUploader').click();
            // After selecting the file get the Selected File Name
            document.getElementById('fileUploader').onchange = function () {
                document.getElementById("txtUploadFile").value = this.value;
            };
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <input type="text" runat="server" id="txtUploadFile" />
            <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;" />
        </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 you get a consistent UI for this control.

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.

Comments and Discussions

 
QuestionIssue in case of IE11 PinprofessionalSonu Rajput1-May-14 19:23 

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 | Mobile
Web03 | 2.8.140826.1 | Last Updated 1 May 2014
Article Copyright 2014 by Francis S Michael
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid