CODEWITHSUNDEEP
c#asp.net.netfile-upload
USER_NAME
USER_NAME

Reputation: 1037

ASP - file upload in single step

Browse and Upload with using asp:FileUploadcontrol is working perfectly fine.
But It is two step process. First we have to browse and then select the file.

I want it working in single step So for making it single step I tried the following code: 

protected void Button1_Click(object sender, EventArgs e)
{
    //to launch the hidden fileupload dialog
    ClientScript.RegisterStartupScript (GetType(),
"hwa", "document.getElementById('fileupload').click();", true);

    //Getting the file name
    if (this.fileupload.HasFile)
    {
        string filename = this.fileupload.FileName;

        ClientScript.RegisterStartupScript(GetType(), "hwa", "alert('Selected File: '" + filename + ");", true);
    }
    else 
    {
        ClientScript.RegisterStartupScript(GetType(), "hwa", "alert('No FILE has been selected');", true);
    }

}



In this code, there is one fileUpload control that is being invoked on Button1_Click.
Ideally it should execute the first line then A file Upload control should be shown and after selecting a file or canceling the dialog, flow should go to next line. But dialog is showing up after full function execution finishes.
Because of this asynchronous or not expected execution flow if (this.fileupload.HasFile) is returning false(because user has not been asked to select any file yet) and I am not getting the selected file name.

Can we modify this code to achieve file upload in single step? Or if any other way is possible to do this?

Note- I have asked not to use window forms and Threads. So solution by using these two is not acceptable.

Upvotes: 0

Views: 5779

Answers (4)

Vikas
Vikas

Reputation: 50

Thanks for the other answer I have just combine two example and got the solution for my problem in my project

<head runat="server">
    <title></title>
<script src="Scripts/jquery-1.9.1.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
    <asp:FileUpload ID="fileupload1" runat="server" />
    <asp:Button ID="btnUploadBulk" runat="server" OnClick="btn_Click" Text="upload" style="display:none" />
</div>
<script type="text/javascript">
    var isfirst = true;
    $(function () {
        $('#<%= btnUploadBulk.ClientID%>').on('click', function (e) {
            showUpload();
        })
        });
    function showUpload() {
        var control = document.getElementById("<%= FileUploadControl.ClientID %>");
        control.click();
    }

</script>
</form>

Code Behind

protected void btn_Click(object sender, EventArgs e)
{
    //TODO 
}

This worked for me

Upvotes: 0

Arjun Shetty
Arjun Shetty

Reputation: 1585

For the ones who land here late,

    <div>
        <asp:FileUpload ID="fu" runat="server"  CssClass="bbbb" onchange="clickSeverControl()"/>
        <asp:LinkButton Text="Upload" ID="lnkUpload" runat="server" OnClientClick="showUpload();return false;" OnClick="lnkUpload_Click"/>
    </div>

hide the file control with css

    <style>
    .hiddenStyle {
        visibility:hidden;            
    }
    </style>

on client click event of link button trigger the click of file upload control

    function showUpload() {
        document.getElementById("fu").click();
    }

on change event trigger the server side click

    function clickSeverControl() {

        __doPostBack('<%= lnkUpload.ClientID %>', 'OnClick');
    }

on server click save the uploaded file

    protected void lnkUpload_Click(object sender, EventArgs e)
    {
        fu.PostedFile.SaveAs(Server.MapPath("~/Upload") + "/" + fu.PostedFile.FileName);
    }

Upvotes: 0

th1rdey3
th1rdey3

Reputation: 4358

this is not exactly what you are looking for but it does what you want. difference is that instead of clicking a separate button you have to click the Browse button. and when you press the Open button, the page will postback. I have used JQuery for this. here's my code

ASPX

<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:FileUpload ID="fileupload1" runat="server" />
        <asp:Button ID="btn" runat="server" OnClick="btn_Click" Text="upload" style="display:none" />
    </div>
    <script type="text/javascript">
        var isfirst = true;
        $(function () {

            $('#<%= fileupload1.ClientID %>').on('change', function (e) {
                console.log('change triggered');
                $('#<%= btn.ClientID%>').trigger('click'); // trigger the btn button click which i have hidden using style='display:none'
            });
        });

    </script>
    </form>
</body>

Code behind

protected void btn_Click(object sender, EventArgs e)
{
    //TODO 
}

Upvotes: 1

Jon P
Jon P

Reputation: 19772

You are missing the fact there is a client side/server side disconnect in the web environment.

Your line: ClientScript.RegisterStartupScript (GetType(),"hwa","document.getElementById('fileupload').click();", true); is client side code and will not be executed until the serverside script is comleted and the resulting HTML/javascript/CSS returned to the browser as it is client side javascript. YOu want to be leveraging the onchange event of the file upload control.

The question should help you out: ASP.NET FileUpload: how to automatically post back once a file is selected?

Upvotes: 1

Related Questions