Home > ASP.Net > Add a FileUpload control to your GridView

Add a FileUpload control to your GridView


To add a FileUpload control to your GridView, you first need to add an ItemTemplateField.
To the template field you can add both an ItemTemplate,
which will be displayed when the row is not in edit mode, and an EditItemTemplate,
which will be displayed when the row is in edit mode.
If you only want to show the FileUpload control when a row has entered edit mode,
you can add the FileUpload ot the EditItemTemplate:

so in this example i save image path in Database

<asp:TemplateField HeaderText="Image">
    <ItemTemplate>
       <asp:Image ImageUrl='<%# Eval("Image") %>' runat="server" ID="image" />
    </ItemTemplate>
    <EditItemTemplate>
       <asp:FileUpload ID="FileUpload1" runat="server" />
    </EditItemTemplate>
</asp:TemplateField>

As you can see in the code above, the ItemTempalte will display an Image control,
where the ImageUrl attribute of the control is bound to a “Image” field (The “Image” in this case is the name of the data source’s column that will contain the path to the image that should be displayed).

To pass the filename that is uploaded by the FileUpload control to your data-source control’s UpdateCommand, you need to create a parameter for the filename. To create a parameter that will be used by your UpdateCommand, you can add the parameter to the data-source’s UpdateParameters collection.
The following is an example of a SqlDataSource control where an Image parameter is added, and where the Select- and UpdateCommand are specified (The Image parameter represents the filename that will be passed to the UpdateCommnad):

<asp:SqlDataSource ConnectionString="<%$ ConnectionStrings:CustomerConnectionString %>"
   ID="SqlDataSource1" runat="server"
   SelectCommand="SELECT [CustomerID], [Name], [Image] FROM [Customers]"
   UpdateCommand="UPDATE [Customers] SET [Name] = @Name, [Image] = @Image WHERE [CustomerID] = @original_CustomerID">
   <UpdateParameters>
     <asp: Parameter Name="Image" DefaultValue="default.gif" />
   </UpdateParameters>
</asp:SqlDataSource>

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)
{
    FileUpload fileUpload = GridView1.Rows[e.RowIndex].FindControl("FileUpload1") as FileUpload;
    fileUpload.SaveAs(System.IO.Path.Combine(Server.MapPath("Images"), fileUpload.FileName));
    SqlDataSource1.UpdateParameters["Image"].DefaultValue = "~/Images/" + fileUpload.FileName;

}

Hope this Helps

Good Luck

Advertisements
Categories: ASP.Net Tags:
  1. February 1, 2009 at 6:09 am

    Nice site really!

  2. yasserzaid
    February 2, 2009 at 9:46 pm

    Hi gambling casino

    Thanks for your comment

    Best Regards

  3. Mike
    April 30, 2011 at 3:54 pm

    Cool thx very much, youa re a genius

  4. yasserzaid
    May 14, 2011 at 6:12 am

    @Mike :- you are welcome hope my post helps you good Luck

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: