file upload in gridview

Question

I need to add a column with a file upload control to my grid view so that I can upload files against any particular row. Is it possible to do this, ideally I need to be able to do this without putting the gridview into it's edit state.

Answer 1

You can use this within the as follows:

   <asp:TemplateField HeaderText="UploadImage">

   <ItemTemplate>

      <asp:Image ImageUrl="~/images/1.jpg" runat="server" ID="image" /> // shown only when not in edit mode

    </ItemTemplate>

   <EditItemTemplate>

       <asp:FileUpload ID="FileUpload1" runat="server" /> // shown only in edit mode

   </EditItemTemplate>

  </asp:TemplateField>

At last include a as follows to enter edit mode.

       <asp:commandField showEditButton="true" showCancelButton="true"> 

Then add two events as follows:

   protected void GridView1_RowEditing(object sender, GridViewUpdateEventArgs e)
   { 
       gvwID.EditIndex=e.NewEditIndex;
       BindGrid();
   }   

    protected void GridView1_RowCancelEdit(object sender, GridViewUpdateEventArgs e)
    {  
          gvwID.EditIndex=-1;
           BindGrid();             
    }   

The FileUpload control, will not automatically save the uploaded file. To save the file you need to use the FileUpload control's SaveAs method. Before you can use the SaveAs method you need to get the instance of the FileUpload control for the row you are editing. To get the instance of the control you can hook up to the GridView's RowUpdating event. The following code will get the instance of the FileUpload control and save the uploaded file:

   protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
   {

       int RowID=Convert.ToInt32(gvwID.DataKeys[e.RowIndex].value);

       FileUpload fileUpload = GridView1.Rows[e.RowIndex].FindControl("FileUpload1") as   FileUpload; 

     if(fileUpload.HasFile)
     {

       fileUpload.SaveAs(System.IO.Path.Combine(Server.MapPath("Images"), fileUpload.FileName)); 

        //update db using the name of the file corresponding to RowID
      }

       gvwID.EditIndex=-1;
       BindGrid();

    }

Hope this will help...

Answer 2

The EditTemplate looks like this:

    <EditItemTemplate>

       <asp:TextBox ID="txtImage" runat="server" Text='<%# Bind("Image") %>' Visible="False"></asp:TextBox>
       <asp:FileUpload ID="FileUpload1" runat="server" />

    </EditItemTemplate>

In code behind this will upload the file on Row Update:

  protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
    GridViewRow row = GridView1.Rows[e.RowIndex] as GridViewRow;
    FileUpload FileUpload1 = (FileUpload)GridView1.Rows[e.RowIndex].FindControl("FileUpload1");

    if (FileUpload1 != null && FileUpload1.HasFile)
    {
        FileUpload1.SaveAs(Server.MapPath("~/uploads/" + myfilename));
    }
}

This check is in place in case no file is selected so previous name is picked. Note in edit template we have placed a textbox that has visibility set to false which binds to the image name in the DB

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
    if (GridView1.EditIndex == -1) return;
    FileUpload fileUpLoad = GridView1.Rows[GridView1.EditIndex].FindControl("FileUpload1") as FileUpload;
    string fileName = fileUpLoad.FileName;
    TextBox txtImage = GridView1.Rows[GridView1.EditIndex].FindControl("txtImage") as TextBox;

    if (fileUpLoad != null && fileUpLoad.HasFile)
    {
        txtImage.Text = fileUpLoad.FileName;
    }
    else
    {
        txtImage.Text = txtImage.Text;
    }

}

Answer 3

<asp:ScriptManager runat="server" ID="scm"></asp:ScriptManager>

<asp:UpdatePanel runat="server" ID="upMain" UpdateMode="Conditional"> 
<ContentTemplate>

  <asp:GridView AutoGenerateColumns="False" runat="server" ID="dt">  
<Columns>    
<asp:TemplateField HeaderText="Catagory">        
<ItemTemplate>            
<asp:DropDownList runat="server" ID="ddlSubCat">            
</asp:DropDownList>        
</ItemTemplate>    
</asp:TemplateField>    

<asp:TemplateField HeaderText="Attachments">        
<ItemTemplate>           

<asp:UpdatePanel runat="server" UpdateMode="Conditional" ID="updFU">                   <ContentTemplate>      
<asp:FileUpload runat="server" ID="updCon" /><asp:Button runat="server" ID="btnUpload" Text="Upload" />            
</ContentTemplate>            
<Triggers>              
<asp:PostBackTrigger ControlID="btnUpload" />            
</Triggers>      
</asp:UpdatePanel>   

</ItemTemplate>    
</asp:TemplateField>  
</Columns>  
</asp:GridView>

</ContentTemplate>
</asp:UpdatePanel>

Answer 4

The following link will help you:

http://msdn.microsoft.com/en-us/library/7tas5c80.aspx

It has a sample code for adding a DateTimePicker to datagridview cell. You may add the fileupload control the same way...

Hope this helps...

Answer 5

Sudha have a great post with full functionality of file upload in GridView :

Fileupload control in gridview?

---

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ID"
DataSourceID="AccessDataSource1" Width="148px" OnRowCommand="GridView1_RowCommand">
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" ReadOnly="True" SortExpression="ID" />
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="lblFileUpLoad" runat="server"></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:FileUpload ID="FileUpload1" runat="server" />
</EditItemTemplate>
</asp:TemplateField>
<asp:CommandField ShowEditButton="true" ShowDeleteButton="true" />
</Columns>
</asp:GridView>
....