In my webform I want to upload a file using asp:FileUpload control,

So when I click Asp:button; FileUpload click should occur and OpenFileDialog should get open.

FilePathBrowser.ascx

<script type="text/javascript" src = "../Scripts/jquery-1.2.6.js">
$(document).ready(function () {
    $(document).on('change', '#<%= fUpload.ClientID %>', function () {
        if (document.getElementById('<%= fUpload.ClientID %>').files.length === 0) {
            return;
        }
        $('#<%= btnText.ClientID %>').trigger('click');
    });
});
</script>


    <table width="100%">
    <tr>
    <td style="width:80%;"><asp:TextBox ID="txtFilePath" runat="server" CssClass="FlatTextbox" Width="100%" ReadOnly="true" ></asp:TextBox></td>
    <td style="width:10%; padding-left:15px"><asp:Button ID="btnText" runat="server" Text="" CssClass="FlatButton" Width="100%" onclick="btnText_Click" /></td>
    <td style="width:10%"><asp:FileUpload ID="fUpload" runat="server" Visible="false" OnClick="DoOpenFileDialog()"/></td>
    </tr>
    </table>

FilePathBrowser.ascx.cs

    public partial class FilePathBrowser : System.Web.UI.UserControl
    {
        public event EventHandler BrowseClick;

        public string FilePathText 
        {
            get { return txtFilePath.Text; }
            set { txtFilePath.Text = value; }
        }

        public string ButtonText
        {
            get { return btnText.Text; }
            set { btnText.Text = value; }
        }

        public FileUpload HiddenFileUploadCtrl
        {
            get { return this.fUpload; }
            set { fUpload = value; }
        }

        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btnText_Click(object sender, EventArgs e)
        {
            BrowseClick(sender, e);
        }
    }

On Web Page Menu.aspx

    <UserControl:FPBrowser ID = "fpbImageUpload" runat = "server" ButtonText="Browse.." FilePathText="" OnBrowseClick="fpbImageUpload_BrowseClick"/>

Menu.aspx.cs

    protected void fpbImageUpload_BrowseClick(object sender, EventArgs e)
    {
        if (fpbImageUpload.HiddenFileUploadCtrl.HasFile)
        {
            String fileName = fpbImageUpload.HiddenFileUploadCtrl.FileName;
            fpbImageUpload.FilePathText = Path.Combine(Helper.FileUploadPath, fileName);
            fpbImageUpload.HiddenFileUploadCtrl.SaveAs(Path.Combine(Helper.FileUploadPath, fileName));
        }
    }

So the dialog box is not getting opened. Does any one know what I am missing in the code.??

In my webform I want to upload a file using asp:FileUpload control,

So when I click Asp:button; FileUpload click should occur and OpenFileDialog should get open.

FilePathBrowser.ascx

<script type="text/javascript" src = "../Scripts/jquery-1.2.6.js">
$(document).ready(function () {
    $(document).on('change', '#<%= fUpload.ClientID %>', function () {
        if (document.getElementById('<%= fUpload.ClientID %>').files.length === 0) {
            return;
        }
        $('#<%= btnText.ClientID %>').trigger('click');
    });
});
</script>


    <table width="100%">
    <tr>
    <td style="width:80%;"><asp:TextBox ID="txtFilePath" runat="server" CssClass="FlatTextbox" Width="100%" ReadOnly="true" ></asp:TextBox></td>
    <td style="width:10%; padding-left:15px"><asp:Button ID="btnText" runat="server" Text="" CssClass="FlatButton" Width="100%" onclick="btnText_Click" /></td>
    <td style="width:10%"><asp:FileUpload ID="fUpload" runat="server" Visible="false" OnClick="DoOpenFileDialog()"/></td>
    </tr>
    </table>

FilePathBrowser.ascx.cs

    public partial class FilePathBrowser : System.Web.UI.UserControl
    {
        public event EventHandler BrowseClick;

        public string FilePathText 
        {
            get { return txtFilePath.Text; }
            set { txtFilePath.Text = value; }
        }

        public string ButtonText
        {
            get { return btnText.Text; }
            set { btnText.Text = value; }
        }

        public FileUpload HiddenFileUploadCtrl
        {
            get { return this.fUpload; }
            set { fUpload = value; }
        }

        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btnText_Click(object sender, EventArgs e)
        {
            BrowseClick(sender, e);
        }
    }

On Web Page Menu.aspx

    <UserControl:FPBrowser ID = "fpbImageUpload" runat = "server" ButtonText="Browse.." FilePathText="" OnBrowseClick="fpbImageUpload_BrowseClick"/>

Menu.aspx.cs

    protected void fpbImageUpload_BrowseClick(object sender, EventArgs e)
    {
        if (fpbImageUpload.HiddenFileUploadCtrl.HasFile)
        {
            String fileName = fpbImageUpload.HiddenFileUploadCtrl.FileName;
            fpbImageUpload.FilePathText = Path.Combine(Helper.FileUploadPath, fileName);
            fpbImageUpload.HiddenFileUploadCtrl.SaveAs(Path.Combine(Helper.FileUploadPath, fileName));
        }
    }

So the dialog box is not getting opened. Does any one know what I am missing in the code.??

• javascript
• c#
• asp

• 1 so where is the question ?? – yogi970 Commented Nov 23, 2014 at 9:29
• So the dialog box is not getting opened. Does any one know what I am missing in the code.?? – AMIT SHELKE Commented Nov 23, 2014 at 15:04

1 Answer 1

Add this javascript function to usercontrol

function hookFileClick() {
    // Initiate the File Upload Click Event
    document.getElementById('<%=fUpload.ClientID%>').click();
}

function callme(oFile) {
    document.getElementById('<%=txtFilePath.ClientID%>').value = oFile.value;
}

User Control.ascx

    <table width="100%">
    <tr>
    <td style="width:70%;"><input ID="txtFilePath" runat="server" type="text" class="FlatTextbox" style= "width:100%;" /></td>
    <td style="width:29%; padding-left:15px"><asp:Button ID="btnText" runat="server" Text="" CssClass="FlatButton" Width="100%" OnClick="btnText_Click" OnClientClick="javascript:return hookFileClick();" /></td>
    <td style="width:1%"><asp:FileUpload ID="fUpload" runat="server" Style="visibility: hidden;width:1px" onchange="callme(this)"/></td>
    </tr>
    </table>

Modified Code in Menu.aspx.cs file

 protected void fpbImageUpload_BrowseClick(object sender, EventArgs e)
    {
        if (fpbImageUpload.HiddenFileUploadCtrl.HasFile)
        {
            String fileName = fpbImageUpload.HiddenFileUploadCtrl.FileName;
            //fpbImageUpload.FilePathText = Path.Combine(Helper.FileUploadPath, fileName);
            fpbImageUpload.HiddenFileUploadCtrl.SaveAs(Path.Combine(Helper.FileUploadPath, fileName));
        }
    }