CODEWITHSUNDEEP
c#asp.net
Wcatter
Wcatter

Reputation: 137

Image (thumbnail) not displaying in aspx webpage

I am back to C# after roaming around with other languages. I am facing an issue after the file has been moved to the 2 locations successfully. Issue: I can't see the Thumbnail uploaded. The issue is on the CS code when listing the images exactly here I assume, I don't know how to call the file to read, using which path... 

        string fileName = Path.GetFileName(filePath);
        files.Add(new ListItem(fileName, "C:/Image_folder/" + fileName));

Any help is welcome

ASPX

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CS.aspx.cs" Inherits="CS" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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="Upload" />
    <hr />
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" ShowHeader="false">
        <Columns>
            <asp:BoundField DataField="Text" />
            <asp:ImageField  DataImageUrlField="Value" ControlStyle-Height="100" ControlStyle-Width="100" />
        </Columns>
    </asp:GridView>
    </form>
</body>
</html>

CS

using System;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Collections.Generic;

public partial class CS : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            string[] filePaths = Directory.GetFiles("C:\\Image_folder\\");
            List <ListItem> files = new List<ListItem>();
            foreach (string filePath in filePaths)
            {
                string fileName = Path.GetFileName(filePath);
                files.Add(new ListItem(fileName, "C:/Image_folder/" + fileName));
            }
            GridView1.DataSource = files;
            GridView1.DataBind();
        }
    }
    protected void Upload(object sender, EventArgs e)
    {
        if (FileUpload1.HasFile)
        {
            string fileName = Path.GetFileName(FileUpload1.PostedFile.FileName);
            FileUpload1.PostedFile.SaveAs("C:\\Image_folder\\" + fileName);
            File.Copy("C:\\Image_folder\\" + fileName, "\\\\192.168.1.1\\shared_image_folder\\" + fileName, true);
            Response.Redirect(Request.Url.AbsoluteUri);
        }
    }
}

SOURCE FROM THE GRID

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title></head>
<body>
    <form method="post" action="./CS.aspx" id="form1" enctype="multipart/form-data">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTIwMTcxNDg1MzIPZBYCAgMPFgIeB2VuY3R5cGUFE211bHRpcGFydC9mb3JtLWRhdGEWAgIFDzwrABEDAA8WBB4LXyFEYXRhQm91bmRnHgtfIUl0ZW1Db3VudAIDZAEQFgAWABYADBQrAAAWAmYPZBYKZg8PFgIeB1Zpc2libGVoZGQCAQ9kFgRmDw8WAh4EVGV4dAUZMjg0NHgxNjAwLWJhY2tncm91bmRzLnBuZ2RkAgEPZBYEZg8PFgIeDUFsdGVybmF0ZVRleHRlZGQCAQ8PFgIfA2hkZAICD2QWBGYPDxYCHwQFFWJhY2tncm91bmRfc2t5ZWVlLmpwZ2RkAgEPZBYEZg8PFgIfBWVkZAIBDw8WAh8DaGRkAgMPZBYEZg8PFgIfBAUWYmFja2dyb3VuZF9za3llZWVlLmpwZ2RkAgEPZBYEZg8PFgIfBWVkZAIBDw8WAh8DaGRkAgQPDxYCHwNoZGQYAQUJR3JpZFZpZXcxDzwrAAwBCAIBZPplLAL2cXZ3yOS32KPXgASprFrPV/4fflzzREt6LxQN" />
</div>

    <input type="file" name="FileUpload1" id="FileUpload1" />
    <input type="submit" name="btnUpload" value="Upload" id="btnUpload" />
    <hr />
    <div>
    <table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse:collapse;">
        <tr>
            <td>2844x1600-backgrounds.png</td><td><img src="" style="height:100px;width:100px;" /></td>
        </tr><tr>
            <td>background_skyeee.jpg</td><td><img src="" style="height:100px;width:100px;" /></td>
        </tr><tr>
            <td>background_skyeeee.jpg</td><td><img src="" style="height:100px;width:100px;" /></td>
        </tr>
    </table>
</div>

<div class="aspNetHidden">

    <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="17CECB09" />
    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAJ1o9wC/FD3hrc5v52GfoAN5vhDofrSSRcWtmHPtJVt4Nr3LRFm+giVnIqfnqj9kuxQ47Dj1gv1HmdZrTjLiXPV" />
</div></form>

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Chrome","requestId":"336b94aad34847b39a4af20e67138af9"}
</script>
<script type="text/javascript" src="http://localhost:60480/011c96c87fbd421fa3485ec4702d5c1b/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

Upvotes: 0

Views: 226

Answers (1)

Saikat Hasan Khan
Saikat Hasan Khan

Reputation: 56

The problem is you are using an absolute path for the images. You have to use a relative path to your application. For this you can copy the original folder to your project folder. It is not necessary to include this folder to your project. Then just change the code like below

string[] filePaths = Directory.GetFiles(Server.MapPath("~/Image_folder"));
List<ListItem> files = new List<ListItem>();
foreach (string filePath in filePaths)
{
    string fileName = Path.GetFileName(filePath);
    files.Add(new ListItem(fileName, "~/Image_folder/" + fileName));
}
GridView1.DataSource = files;
GridView1.DataBind();

You have to change your upload code as well to use the folder in your project. Use the following code

FileUpload1.PostedFile.SaveAs(Server.MapPath("~/Image_folder/") + fileName);
File.Copy(Server.MapPath("~/Image_folder/") + fileName, "\\\\192.168.1.1\\shared_image_folder\\" + fileName, true);

Upvotes: 1

Related Questions