To trigger Choose file to Upload dialogue box with single ASP button without using JavaScript, Jquery and Ajax controls

Introduction

On a fine working day, I got a task from my project lead. The task was very simple - I had to create a file uploader in ASP.NET. When I started doing that task, he gave me some requirements.

The Requirements are:

1. The file uploader should contain only one button with text as "Choose File.."
   
   
2. I should not use any Ajax file Uploaders.
   
   
3. I should not use any swf Uploaders.
   
   
4. I should not use JavaScript and JQuery.
   

I jusk said ok, no problem and I searched everywhere in Google forums and even in CodeProject, but I didn't get any solution for that problem. Suddenly I got an idea of doing that task using CSS and finally I succeeded.

Using the Code

<form id="form1" runat="server">

    <div style="height: 89px; width: 620px; position: relative; top: 226px; left: 229px; overflow:hidden">
        <asp:FileUpload ID="FileUpload1" runat="server"
            Style=" top:1px; left:-10px; width: 265px; position: relative; height: 26px; opacity: 0; filter: alpha(opacity=0)"
            Font-Size="30pt" />
        <asp:Button ID="Button1" runat="server" Text="Choose file.."
            Style="top: -5px; left:-265px; z-index: -1; width: 251px; position: relative;"
            Height="22px" />
    </div>

    </form>

In the above code, you can see that there are two controls - one is file upload and another one is a button.

Now by giving this CSS property "opacity: 0; filter: alpha(opacity=0)" to file upload, we can makefile upload control as invisible.

We all know that we cannot increase the width size of browse button in File Upload control so to increase the width of the browse button, we increase the font size so the browsebutton in file upload will become a little wider.

Now shrink the fileupload until the textbox in file upload disappears. Make sure that the controls are placed inside the "div" tag and the overflow of that div tag is hidden.

Now right-click on the ASP button and give send to back (index as -1).

By placing the ASP button over the file upload control, ASP button will be placed behind the file upload control.

So when end user clicks on that Asp button, naturally File upload control which is placed over the button will be clicked and "Choose file to upload dialogue" box will be triggered.

Notes

Make some minor changes in CSS properties so that the application works perfectly on your system because your screen resolutions may vary.

Reference

• www.w3schools.com