CODEWITHSUNDEEP
c#asp.netfile-upload
Gioce90
Gioce90

Reputation: 623

Use a Button like a FileUpload in ASP.NET

I have this situation:

enter image description here

Two normal ASP.NET controls. But I want to hide the FileUpload control, and remain with the only Button.

Something so trivial is causing me more problems than expected.This is my implementation:

ASPX:

<asp:FileUpload ID="FileUpload1" runat="server" />

<asp:Button ID="UploadButton" runat="server" Text="Carica Documento" OnClientClick="showBrowseDialog();" />

<asp:Button runat="server" ID="hideButton" Text="" style="display:none;" OnClick="UploadButton_Click" />

<script type="text/javascript" language="javascript">
    function showBrowseDialog() {
        var fileuploadctrl = document.getElementById('<%= FileUpload1.ClientID %>');
        fileuploadctrl.click();

        var btn = document.getElementById('<%= hideButton.ClientID %>');
        btn.click();
    }
</script>

C#:

protected void UploadButton_Click(object sender, EventArgs e)
{
    if (FileUpload1.HasFile)
    {
        try
        {
            string address = Server.MapPath("") + "\\" + FileUpload1.FileName;
            FileUpload1.SaveAs(address);
            //...
        }
        catch (Exception) { }
    }

Upvotes: 1

Views: 17074

Answers (4)

BigJoeNH
BigJoeNH

Reputation: 401

My solution needed the user to only have to click a single button to upload and then process the file.

Using JQuery and Bootstrap 4x to help, I used a slightly different approach using 3 controls (2 ASPX). Only the "btnUploadFile" is displayed.

<input id="btnUploadFile" type="button" class="btn btn-primary" value="Select CSV File and Upload" onclick="$('#FileUploadControl').click();"/>
    
<asp:FileUpload ID="FileUploadControl" ClientIDMode="static" runat="server" CssClass="d-none" onchange="$('#btnUploadAndProcess').trigger('click'); return false;" accept=".csv" />

<asp:Button ID="btnUploadAndProcess" ClientIDMode="static" runat="server" CssClass="d-none" OnClick="btnUploadAndProcess_Click"/>

When "btnUploadFile" is clicked, the "FileUploadControl" onclick event opens the OPEN file dialog. When a file is selected the "btnUploadAndProcess_Click" C# method runs.

protected void btnUploadAndProcess_Click(object sender, EventArgs e) {
        if (FileUploadControl.HasFile) {
            try { 
                   ...
            }
            catch (Exception ex) { }
        }
}

Upvotes: 0

Kumar Akhil
Kumar Akhil

Reputation: 176

Try This.......

ASPX:

<asp:FileUpload ID="FileUpload1" runat="server"/>
<asp:Button ID="UploadButton" runat="server" Text="Carica Documento" OnClientClick="return showBrowseDialog();" onclick="UploadButton_Click"/>

<script type="text/javascript" language="javascript">
    function showBrowseDialog() 
    {
        document.getElementById('<%=FileUpload1.ClientID%>').click();    
    }
    </script>

C#:

protected void Page_Load(object sender, EventArgs e)
        {
            FileUpload1.Attributes["style"] = "display:none";
        }

        protected void UploadButton_Click(object sender, EventArgs e)
        {           
            if (FileUpload1.HasFile)
            {
                try
                {
                    string address = Server.MapPath("~/") + FileUpload1.FileName;
                    FileUpload1.PostedFile.SaveAs(address);
                    //...
                }
                catch (Exception) { }
            }
        }

Upvotes: 0

Alexandr Kudryashov
Alexandr Kudryashov

Reputation: 631

Try this layoutt

<asp:FileUpload ID="FileUpload1" Style="display: none" runat="server" onchange="upload()" />
<input type="button" value="Carica Documento"  onclick="showBrowseDialog()"/>

<asp:Button runat="server" ID="hideButton" Text="" Style="display: none;" OnClick="UploadButton_Click" />

<script type="text/javascript" language="javascript">
    function showBrowseDialog() {
        var fileuploadctrl = document.getElementById('<%= FileUpload1.ClientID %>');
        fileuploadctrl.click();
    }

    function upload() {
        var btn = document.getElementById('<%= hideButton.ClientID %>');
        btn.click();
    }
</script>

Upvotes: 5

A3006
A3006

Reputation: 1069

Not sure if I have understood this. Do you want to show only one button instead of two which will open the file dialogue box and after you select a file, do the upload job?

Upvotes: 0

Related Questions