Click here to Skip to main content
15,907,281 members
Articles / Web Development

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

Rate me:
Please Sign up or sign in to vote.
4.25/5 (8 votes)
8 Dec 2011CPOL2 min read 45.9K   2   7
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.

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" />


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.


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



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

Written By
Software Developer (Senior) Scope International
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 Sr SharePoint developer.

Comments and Discussions

QuestionOnClick is not working while using this trick Pin
Member 1208140620-May-18 21:37
Member 1208140620-May-18 21:37 
Question. Pin
Marshall Singh4-Nov-12 20:45
Marshall Singh4-Nov-12 20:45 
GeneralNice trick!! Pin
raju dasa4-Jan-12 6:54
raju dasa4-Jan-12 6:54 
Nice trick!!
GeneralRe: Thank you Pin
Balakrishnan Dhinakaran4-Jan-12 18:09
professionalBalakrishnan Dhinakaran4-Jan-12 18:09 
GeneralReason for my vote of 1 not a good one Pin
Prince Antony G15-Dec-11 0:26
Prince Antony G15-Dec-11 0:26 
GeneralRe: Then Please guide me if you have any other alternative solut... Pin
Balakrishnan Dhinakaran15-Dec-11 2:11
professionalBalakrishnan Dhinakaran15-Dec-11 2:11 
GeneralReason for my vote of 4 not work with firefox Pin
beginner201112-Dec-11 15:14
beginner201112-Dec-11 15:14 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.