Calling button click on file upload inside gridview

Question

I'm trying to upload a file onchange event of the "Fileupload" control inside gridview. Means when ever user uploads the file, there itself I needs to save the file content in DB. So, I had mannually called the click event of the button control on the change of fileupload control But its throwing as like exception like "Invalid postback or callback argument...."

my gridview code :

<asp:GridView runat="server" ID="grd" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="StudentID" HeaderText="Student ID" />
        <asp:BoundField DataField="StudentName" HeaderText="Name" />
        <asp:TemplateField HeaderText="Upload">
            <ItemTemplate>
                <asp:FileUpload ID="FileUpload1" runat="server" EnableViewState="true" onChange="FileUploadCall(this)" />
                <asp:Button ID="btnUpload" Text="Upload" runat="server" OnClick="Upload" Style="display: none" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

My script Code :

<script type="text/javascript">
    function FileUploadCall(fileUpload) {
        if (fileUpload.value != '') {
            var a = $('#<%=grd.ClientID %>').find('[id*="btnUpload"]');
            a.click();
        }
    }
</script>

My Hidden Button mannual click creation in cs file :

protected void Upload(object sender, EventArgs e)
{
    Button btn = sender as Button;
    GridViewRow gvr = (GridViewRow)btn.Parent.Parent;

    FileUpload lbleno = (FileUpload)gvr.FindControl("FileUpload1");

    lbleno.SaveAs(Server.MapPath("~/Uploads/" + Path.GetFileName(lbleno.FileName)));
    //lblMessage.Visible = true;
}

Answer 1

The easiest way is to assign the onchange event from code behind so you can get the correct button easily. So create a RowDataBound event for the GridView.

<asp:GridView ID="grd" runat="server" OnRowDataBound="grd_RowDataBound">

Then in the RowDataBound method, use FindControl to locate and cast the FileUpload and the Button. In the method you can assign the change event to trigger a PostBack of the corresponding button.

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    //check if the row is a datarow
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        //use findcontrol to locate the controls in the row and cast them
        Button btn = e.Row.FindControl("btnUpload") as Button;
        FileUpload fu = e.Row.FindControl("FileUpload1") as FileUpload;

        //assign the button postback to the change of the fileupload
        fu.Attributes.Add("onchange", "__doPostBack('" + btn.UniqueID + "','')");
    }
}

Answer 2

Your jquery code that gets the button to upload may be the reason.

Since you said you are using a gridview, so there could be multiple rows each having its own fileupload and button controls. You need to get the button control associated with this row in grid view. To get the associated button, you should be using the jquery code like below, since the associated button immediately follows the fileupload control.

if (fileUpload.value != '') {
    var a = $(fileUpload).next("[id*='Button1']");
    a.click();
  }

Answer 3

Your implementations is fine only change:

a.click(); => a[0].click();  //important!!

and I hope no binding is happening in the postback:

if (!IsPostBack)
{
    var list = new List<Student>();
    list.Add(new Student() {StudentID = 1, StudentName = "111"});
    list.Add(new Student() {StudentID = 2, StudentName = "222"});
    grd.DataSource = list;
    grd.DataBind();
}

I've tested it works totally fine!