locked
How to display images in gridview stored in a folder? RRS feed

  • Question

  • User1541640745 posted

    Hi,

    In first step I want display images from folder.

    In the next  step I want connect with a web server and upload and delete images stored there.

    Now I see only image name and delete button.

    index.aspx:

    <%@ Page Language="C#" Inherits="UploadDelete.index" %>
    <!DOCTYPE html>
    <html>
    <head runat="server">
    	<title>index</title>
    </head>
    <body>
    	<form id="form1" runat="server">
    			<asp:FileUpload ID="FileUpload1" runat="server" />
    <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="UploadFile" />
    <hr />
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" EmptyDataText = "No files uploaded">
        <Columns>
            <asp:BoundField DataField="Text" HeaderText="File Name" />
            <asp:TemplateField>
                <ItemTemplate>				
                    <asp:Image ID="Image1" runat="server" Height="130px" ImageUrl='<%# Eval("~/Download/") %>' Width="171px" />
                </ItemTemplate>
                <ItemTemplate>
                    <asp:LinkButton ID = "lnkDelete" Text = "Delete" CommandArgument = '<%# Eval("Value") %>' runat = "server" OnClick = "DeleteFile" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    	</form>
    </body>
    </html>

    index.aspx.cs:

    using System;
    using System.Web;
    using System.Web.UI;
    using System.IO;
    using System.Collections.Generic;
    using System.Web.UI.WebControls;
    using System.Collections;
    using System.Data;
    
    namespace UploadDelete
    {
        public partial class index : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                
                if (!IsPostBack)
                {
                    string[] filePaths = Directory.GetFiles(Server.MapPath("~/Download/"));
                    List<ListItem> files = new List<ListItem>();
                    foreach (string filePath in filePaths)
                    {
                        files.Add(new ListItem(Path.GetFileName(filePath), filePath));
                    }
                    GridView1.DataSource = files;
                    GridView1.DataBind();
                }
            }
    
            protected void UploadFile(object sender, EventArgs e)
            {
                string fileName = Path.GetFileName(FileUpload1.PostedFile.FileName);
                FileUpload1.PostedFile.SaveAs(Server.MapPath("~/Download/") + fileName);
                Response.Redirect(Request.Url.AbsoluteUri);
            }
    
            protected void DownloadFile(object sender, EventArgs e)
            {
                string filePath = (sender as LinkButton).CommandArgument;
                Response.ContentType = ContentType;
                Response.AppendHeader("Content-Disposition", "attachment; filename=" + Path.GetFileName(filePath));
                Response.WriteFile(filePath);
                Response.End();
            }
    
            protected void DeleteFile(object sender, EventArgs e)
            {
                string filePath = (sender as LinkButton).CommandArgument;
                File.Delete(filePath);
                Response.Redirect(Request.Url.AbsoluteUri);
            }
        }
    }
    

    Sunday, October 29, 2017 1:12 PM

Answers

  • User475983607 posted

    I modified the code a bit and it works.  I removed the download bit and replaced it with a link to open the file.  The user can download if they like bu right clicking.

    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebFormsIdentity
    {
        public partial class FileManager : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    BindGrid();
                }
    
            }
    
            protected void UploadFile(object sender, EventArgs e)
            {
                string fileName = Path.GetFileName(FileUpload1.PostedFile.FileName);
                FileUpload1.PostedFile.SaveAs(Server.MapPath("~/Download/") + fileName);
                BindGrid();
            }
    
            protected void DeleteFile(object sender, EventArgs e)
            {
                string command = ((LinkButton)sender).CommandArgument;
                string filePath = Server.MapPath("~/Download/") + command;
                File.Delete(filePath);
                BindGrid();
            }
    
            protected void BindGrid()
            {
                string[] filePaths = Directory.GetFiles(Server.MapPath("~/Download/"));
                List<ListItem> files = new List<ListItem>();
                foreach (string filePath in filePaths)
                {
                    files.Add(new ListItem(Path.GetFileName(filePath), "~/Download/" + Path.GetFileName(filePath)));
                }
                GridView1.DataSource = files;
                GridView1.DataBind();
            }
        }
    }
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FileManager.aspx.cs" Inherits="WebFormsIdentity.FileManager" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:FileUpload ID="FileUpload1" runat="server" />
            <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="UploadFile" />
            <hr />
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" EmptyDataText="No files uploaded">
                <Columns>
                    <asp:BoundField DataField="Text" HeaderText="File Name" />
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:HyperLink ID="download" runat="server" NavigateUrl='<%# Eval("Value") %>'>
                                <asp:Image ID="Image1" runat="server" Height="130px" ImageUrl='<%# Eval("Value") %>' Width="171px" />    
                            </asp:HyperLink>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:LinkButton ID="lnkDelete" Text="Delete" CommandArgument='<%# Eval("Text") %>' runat="server" OnClick="DeleteFile" />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </form>
    </body>
    </html>
    



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, October 29, 2017 3:08 PM

All replies

  • User475983607 posted

    Change the markup to this...

            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" EmptyDataText="No files uploaded">
                <Columns>
                    <asp:BoundField DataField="Text" HeaderText="File Name" />
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:Image ID="Image1" runat="server" Height="130px" ImageUrl='<%# Eval("Value") %>' Width="171px" />
                            <asp:LinkButton ID="lnkDelete" Text="Delete" CommandArgument='<%# Eval("Text") %>' runat="server" OnClick="DeleteFile" />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>

    Or this

            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" EmptyDataText="No files uploaded">
                <Columns>
                    <asp:BoundField DataField="Text" HeaderText="File Name" />
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:Image ID="Image1" runat="server" Height="130px" ImageUrl='<%# Eval("Value") %>' Width="171px" />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:LinkButton ID="lnkDelete" Text="Delete" CommandArgument='<%# Eval("text") %>' runat="server" OnClick="DeleteFile" />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    string[] filePaths = Directory.GetFiles(Server.MapPath("~/Download/"));
                    List<ListItem> files = new List<ListItem>();
                    foreach (string filePath in filePaths)
                    {
                        files.Add(new ListItem(Path.GetFileName(filePath), "~/Download/"  + Path.GetFileName(filePath)));
                    }
                    GridView1.DataSource = files;
                    GridView1.DataBind();
                }
    
            }



    Sunday, October 29, 2017 2:14 PM
  • User1541640745 posted

    mgebhard

    Change the markup to this...

    Thank you, but it doesn't work.

    In both cases I have the same info:

    System.Web.HttpException

    Property ~/Download/ not found in System.Web.UI.WebControls.ListItem

    Description: HTTP 500.Error processing request.

    Details: Error processing request.

    <div>Exception stack trace:</div> <div class="details">at System.Web.UI.DataBinder.GetPropertyValue (System.Object container, System.String propName) [0x00035] in /Users/builder/data/lanes/4992/mono-mac-sdk/external/bockbuild/builds/mono-x64/mcs/class/System.Web/System.Web.UI/DataBinder.cs:185</div> <div class="details">at System.Web.UI.DataBinder.Eval (System.Object container, System.String expression) [0x0005d] in /Users/builder/data/lanes/4992/mono-mac-sdk/external/bockbuild/builds/mono-x64/mcs/class/System.Web/System.Web.UI/DataBinder.cs:72</div> <div class="details">at System.Web.UI.TemplateControl.Eval (System.String expression) [0x00000] in /Users/builder/data/lanes/4992/mono-mac-sdk/external/bockbuild/builds/mono-x64/mcs/class/System.Web/System.Web.UI/TemplateControl.cs:490</div>

    Sunday, October 29, 2017 2:38 PM
  • User475983607 posted

    I modified the code a bit and it works.  I removed the download bit and replaced it with a link to open the file.  The user can download if they like bu right clicking.

    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebFormsIdentity
    {
        public partial class FileManager : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    BindGrid();
                }
    
            }
    
            protected void UploadFile(object sender, EventArgs e)
            {
                string fileName = Path.GetFileName(FileUpload1.PostedFile.FileName);
                FileUpload1.PostedFile.SaveAs(Server.MapPath("~/Download/") + fileName);
                BindGrid();
            }
    
            protected void DeleteFile(object sender, EventArgs e)
            {
                string command = ((LinkButton)sender).CommandArgument;
                string filePath = Server.MapPath("~/Download/") + command;
                File.Delete(filePath);
                BindGrid();
            }
    
            protected void BindGrid()
            {
                string[] filePaths = Directory.GetFiles(Server.MapPath("~/Download/"));
                List<ListItem> files = new List<ListItem>();
                foreach (string filePath in filePaths)
                {
                    files.Add(new ListItem(Path.GetFileName(filePath), "~/Download/" + Path.GetFileName(filePath)));
                }
                GridView1.DataSource = files;
                GridView1.DataBind();
            }
        }
    }
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FileManager.aspx.cs" Inherits="WebFormsIdentity.FileManager" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:FileUpload ID="FileUpload1" runat="server" />
            <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="UploadFile" />
            <hr />
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" EmptyDataText="No files uploaded">
                <Columns>
                    <asp:BoundField DataField="Text" HeaderText="File Name" />
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:HyperLink ID="download" runat="server" NavigateUrl='<%# Eval("Value") %>'>
                                <asp:Image ID="Image1" runat="server" Height="130px" ImageUrl='<%# Eval("Value") %>' Width="171px" />    
                            </asp:HyperLink>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:LinkButton ID="lnkDelete" Text="Delete" CommandArgument='<%# Eval("Text") %>' runat="server" OnClick="DeleteFile" />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </form>
    </body>
    </html>
    



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, October 29, 2017 3:08 PM
  • User1541640745 posted

    Thank you very much for your help.

    It works. Now I will make next step to connect it with my web server

    Sunday, October 29, 2017 8:34 PM