Banner Ad

Monday, April 21, 2014

File Upload Control–How to give same UI in all browsers?

By Francis   Posted at   6:56 PM   CodeProject No comments
                                  As all of know, the File Upload control is used to upload your favourite files to the server. One of the biggest challenge while using this control is UI issue. That is this control is rendered in a different ways in all browsers. Please see the below figures, each of them rendered the File Uploader in a different way. That is UI is vary across the browsers.



image
File Upload Control in IE
image
File Upload Control in Firefox

image
File Upload Control in Chrome

So in this post I’m going to present how to avoid this problem and give a consistant Look and feel across all browsers. Just create an aspx file and post the below code on that:

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

                        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.

Output:
image
image
image

If you have any suggestions, shoot me your thoughts as comments!
Hope this helps!

About Francis

Francis, an Associate at Cognizant. Having 7+ Years of experience in Microsoft web technologies.

0 comments :

Please give your valuable comments to improve the contents

Connect with Us