logo

ASP.NET How to Upload a File , TemplateField / EditItemTemplate FileUpload , Gridview , Data Grid Active Server Pages

This code excerpt demonstrates how to upload an image from within a grid cell. The controls in the templatefield/EditItemTemplate, such as, FileUpload controls, textbox controls, or checkboxes can not be access directly. An ASP:Button can be mapped to the the UploadImage_Click event on Click. The Grid row can be accessed by the EditIndex attribute and the FindControl method of the row Gridview used to return a typecasted of the control. Now your in business, the file can be uploaded using the FileUpload, SaveAs method.

<script runat="server">

    Protected Sub UploadImage_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Dim strFileName As String
        Dim oPictureFileUpload As FileUpload = Nothing
        Dim oInputImage_Path As TextBox = Nothing
        Dim oImgProduct As Image = Nothing
        Dim row As GridViewRow = Nothing
        
        If dgProduct.EditIndex <> -1 Then
            row = dgProduct.Rows(dgProduct.EditIndex)
            oPictureFileUpload = CType(row.FindControl("ImageFileUpload"), FileUpload)
            oInputImage_Path = CType(row.FindControl("txtInputImage_Path"), TextBox)
            strFileName = oPictureFileUpload.FileName
            Dim c As String = System.IO.Path.GetFileName(strFileName)

            Try
                oPictureFileUpload.PostedFile.SaveAs(Server.MapPath("~\") & c)
            Catch Exp As Exception
                'Span1.InnerHtml = "An Error occured. Please check the attached  file"
            End Try
            oInputImage_Path.Text = strFileName
        End If
    End Sub

</script>


<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

    <asp:button ID=cmdQueryHeadline runat=server Text="Query" OnClick="cmdQueryHeadline_Click" />
    <asp:GridView id="dgProduct" 
			DataKeyNames="ProductId"
			DataSourceId="dsProduct"
			BorderColor="Black"
            BorderWidth="1px"
            CellPadding="3"
            Font-Names="Verdana"
            Font-Size="8pt"
            Width="700px"
            HeaderStyle-BackColor="#aaaadd"
            runat="server"
            AllowPaging="True"
            AllowSorting="True"
            AutogenerateColumns="False"
            PageSize="5" 
            OnRowUpdating="dgProduct_RowUpdating" 
            >
<columns>
    <asp:CommandField ShowEditButton="True" />
    <asp:CommandField ShowDeleteButton="True" />
    <asp:TemplateField HeaderText="Image">
        <EditItemTemplate>
            <asp:textbox  AutoPostBack=true ID="txtInputImage_Path" runat="server" Text='<%# Bind("Image_Path")%>'></asp:textbox>
            <br />
            <asp:FileUpload ID="ImageFileUpload"  runat="server"  /><br />
            <asp:Button ID="cmdUploadImage" runat=server text="Upload Image" OnClick="UploadImage_Click" />
        </EditItemTemplate>
        <ItemTemplate>
            <asp:Image  ID="imgButton" AlternateText="Product Description" runat="server"  width=200 ImageUrl='<%# Bind("Image_Path")%>' ></asp:Image>
        </ItemTemplate>
    </asp:TemplateField>
</columns>
        <HeaderStyle BackColor="#AAAADD" />
        <PagerSettings Position="TopAndBottom" />
</asp:GridView>

<asp:AccessDataSource id="dsProduct" RunAt="Server"
DataFile="APP_DATA/ecommerce.mdb"
selectcommand="select * from product" 
DeleteCommand="delete * from product where productid=@productid"
UpdateCommand="Update [product] set [sku]=@Sku, [description]=@Description, [price]=@Price, [image_path]=@Image_Path where [productid]=@ProductId"
InsertCommand="Insert into product(Sku,description,price,image_path) values(@Sku,@Description,@Price,@Image_Path)"
>
<UpdateParameters>
<asp:Parameter name="@Sku" Type="String" />
<asp:Parameter name="@Description" Type="String" />
<asp:Parameter name="@Price" Type="String" />
<asp:Parameter name="@Image_Path" Type="String" />
<asp:Parameter name="@ProductId" Type="Int32" />
</UpdateParameters>
<InsertParameters>
<asp:Parameter name="@Sku" Type="String" />
<asp:Parameter name="@Description" Type="String" />
<asp:Parameter name="@Price" Type="String" />
<asp:Parameter name="@Image_Path" Type="String" />
</InsertParameters>
</asp:AccessDataSource>
<asp:Panel ID=panelView1 ScrollBars=vertical runat=server>
<asp:Label ID="lblView1" runat="server" Height="400px" Text="Label" Width="640px"></asp:Label>

</asp:Content>
s