Click here to Skip to main content
Click here to Skip to main content
Go to top

ASP FileOpen Dialog

, 23 Sep 2007
Rate this:
Please Sign up or sign in to vote.
This article will help in getting the fileopen dialog in an ASP.NET Web Application.

Introduction

"I want to use a "file open dialog box" control in my web application.", sounds like a common and most frequently asked question. Even I had the same question and started searching for a solution, but believe me, it was very hard to get a solution for this and with some help, I came out with a solution and thought I will share it with all my friends out here.

Using the Code

A web application of course wouldn't have any of the standard OS controls. It's a web application, not a fat client application. The only reason to ever present the user with a "File" dialog box is so they can upload a file. The standard HTML "file input" form element has been around for ages for just that reason: System.Web.UI.HtmlControls.HtmlInputFile.

That's the control I'll be using and working around to make things easier and achieve what I want. This is the code snippet which does all the magic:

<script type="text/javascript"language="javascript">

function getFile()
{
    document.getElementById("file1").click();
    var file = "";
    if(document.getElementById("TextBox1").value == "")
        file = document.getElementById("file1").value; 
    else
        file = document.getElementById("TextBox1").value + 
            "\r\n" + document.getElementById("file1").value;
    document.getElementById("TextBox1").value = file ;
}

</script>

Include this code in the header of the ASPX of the form.

The three controls which are needed are:

  1. ASP Button control
  2. <asp:ButtonID="Button1" runat="server" OnClick="Button1_Click" 
        Style="left: 637px; position: absolute; top: 303px" 
        Text="Button" Width="65px" /> 
  3. ASP TextBox control
  4. <asp:TextBoxID="TextBox1" runat="server" Height="12px" Width="9px">
    </asp:TextBox>
  5. HTML FileUpload control
  6. <inputid="File1" type="file" style=
     "width:119px;left:238px;position:absolute;top:41px;visibility:hidden;"
    />

Remember the "Visibility : Hidden" option in the style attribute of the HTML FileUpload control that is required and will do all the trick required to achieve what is required. It helps you hide the original HTML FileUpload control and lets all the work be done on button click, and then at the end, you can see the selected file path in the ASP TextBox control. You can place it in any of the other controls or use it for further processing.

Points of Interest

I hope this will help many others who are here searching for a solution, but remember, it works in Microsoft's IE only, but there's a solution to make it work in Firefox Mozilla too.. ha ha.. keep searching for that guys… good luck.

License

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

Share

About the Author

Govardhana Reddy
Web Developer India
India India
This is Govardhana Reddy, i am here to explore this world of INTERNET. I feel this is one way through which i can explore this world of INTERNET.
 
I want to be one among the best in this profession (a Software Developer, not a Software Engineer its a bit Controversial.) if not the "BEST"
 
My definition of a Software Engineer : "A person who knows what to cut/copy and where to paste".
 
Apart from my technical stuff I love Long Drives, Computer Gaming, Sports, Bikes and much more to say.
 
Anyways long road ahead keep me accompanied...
Follow on   Twitter

Comments and Discussions

 
QuestionReply Pinmemberyograjchaple7-May-12 21:43 
QuestionIt doesn't work PinmemberPeskind26-Dec-11 21:15 
QuestionWhy not use File Upload control? PinmemberManjit Dosanjh24-Sep-07 1:02 
AnswerRe: Why not use File Upload control? PinmemberGovardhana Reddy25-Sep-07 21:38 
AnswerRe: Why not use File Upload control? PinmemberPavel Yermalovich11-Oct-10 1:35 

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
Web04 | 2.8.140916.1 | Last Updated 23 Sep 2007
Article Copyright 2007 by Govardhana Reddy
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid