Click here to Skip to main content
Click here to Skip to main content

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

, 8 Dec 2011
Rate this:
Please Sign up or sign in to vote.
We all know that "Choose file to Upload" can be triggered using File upload control, SWF controls and some Ajax Controls but here in this trick i am gonna tell you how to trigger "Choose file to Upload" dialogue box with single ASP button using CSS properties.
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

License

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

About the Author

Balakrishnan Dhinakaran
Software Developer CG-VAK Software and Exports pvt Ltd
India India
Hi I completed bachelor of engineering in computer science at Anna University of Technology Coimbatore at 2011. Now currently i am working as a Software Engineer under .Net Technology.

Comments and Discussions

 
Question. PinmemberMarshall Singh4-Nov-12 20:45 
GeneralNice trick!! Pinmemberraju dasa4-Jan-12 6:54 
GeneralRe: Thank you PinmemberBalakrishnan Dhinakaran4-Jan-12 18:09 
GeneralReason for my vote of 1 not a good one PinmemberPrince Antony G15-Dec-11 0:26 
Reason for my vote of 1
not a good one
GeneralRe: Then Please guide me if you have any other alternative solut... PinmemberBalakrishnan Dhinakaran15-Dec-11 2:11 
GeneralReason for my vote of 4 not work with firefox Pinmemberbeginner201112-Dec-11 15:14 

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
Web02 | 2.8.140721.1 | Last Updated 8 Dec 2011
Article Copyright 2011 by Balakrishnan Dhinakaran
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid