CODEWITHSUNDEEP
asp.netfile-uploadwebforms
Simant
Simant

Reputation: 4330

Fileupload is rendering in different way in different browsers in asp.net

FileUpload control is rendering differently in different browsers. In the Firefox, it's showing Browse/No file selected while in Chrome Choose File/No file chosen. Is there a way to display the File Upload in the same way irrespective of browser. My ASP.NET Code and screenshots are attached below:

<asp:Label runat="server" ID="lblFileName" AssociatedControlID="fileUploader"></asp:Label>
<asp:FileUpload ID="fileUploader" runat="server" Width="350" />&nbsp;                                
<asp:Button ID="btnUpload" runat="server" Text="Upload" />

Firefox

enter image description here

Chrome

enter image description here

Upvotes: 0

Views: 1423

Answers (3)

Simant
Simant

Reputation: 4330

Thank you very much @GoldBishop for giving me some hint to write custom css and the following css worked for me.

 <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>

        <style type="text/css">
            .upload-btn-wrapper {
                position: relative;
                overflow: hidden;
                display: inline-block;
            }

            .btn {
                border: 2px solid gray;
                color: gray;
                background-color: white;
                padding: 8px 20px;
                border-radius: 8px;
                font-size: 20px;
                font-weight: bold;
            }

            .upload-btn-wrapper input[type=file] {
                font-size: 100px;
                position: absolute;
                left: 0;
                top: 0;
                opacity: 0;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="upload-btn-wrapper">
                <asp:Label runat="server" ID="lblFileName" AssociatedControlID="fileUploader"></asp:Label>
                <asp:FileUpload ID="fileUploader" runat="server" Width="350" />&nbsp;                                
                <asp:Button ID="btnUpload" runat="server" Text="Upload" CssClass="btn" />
            </div>
        </form>
    </body>
    </html>

Upvotes: 0

Ravikumar
Ravikumar

Reputation: 625

try 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>

C#

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

Upvotes: 0

GoldBishop
GoldBishop

Reputation: 2861

If you want consistent Button Look-And-Feel....you will need to apply the style you wish it to be.

You are using the Default Browser CSS styles. Check your Developer Tools for the associated browser to see how the Look-And-Feel of the controls is being rendered.

Upvotes: 1

Related Questions