Forum Moderators: open
Ive set up an image edit page that allows the admin to upload .jpgs to a directory and then view the content of this directory in a datagrid, ive got the datagrid displaying the filenames.jpg but id like to show a small thumbnail of the image in each datarow, I cant figure it out though ive tried and tried. any help would be great.
here is the source:
<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="iso-8859-1" %>
<%@ Import Namespace="System.IO" %>
<script language="VB" runat="server">
Sub Page_Load(sender as Object, e as EventArgs)
If Not Page.IsPostBack then
Dim dirInfo as New DirectoryInfo(Server.MapPath("../photoImages"))
articleList.DataSource = dirInfo.GetFiles("*.jpg")
articleList.DataBind()
End If
End Sub
Sub articleList_ItemDataBound(sender as Object, e as DataGridItemEventArgs)
' First, make sure we're NOT dealing with a Header or Footer row
If e.Item.ItemType <> ListItemType.Header AND _
e.Item.ItemType <> ListItemType.Footer then
'Now, reference the Button control that the Delete ButtonColumn
'has been rendered to
Dim deleteButton as Button = e.Item.Cells(0).Controls(0)
'We can now add the onclick event handler
deleteButton.Attributes("onclick") = "javascript:return " & _
"confirm('Are you sure you want to delete the file " & _
DataBinder.Eval(e.Item.DataItem, "Name") & "?')"
End If
End Sub
Sub articleList_DeleteFile(sender as Object, e as DataGridCommandEventArgs)
'First, get the filename to delete
Dim fileName as String = articleList.DataKeys(e.Item.ItemIndex)
File.Delete(fileName)
response.Redirect("edit_gallery.aspx")
'You would want to rebind the Directory's files to the DataGrid after
'deleting the file...
End Sub
sub UploadFile_Clicked(src as object , e as eventargs )
dim FileName
dim uploadDirectory = (Server.MapPath("../photoImages/"))
FileName = uploadFile.PostedFile.FileName
FileName = Path.GetFileName(FileName)
uploadFile.PostedFile.SaveAs(uploadDirectory + FileName)
uploadFileName.Text = FileName
FileType.Text = uploadFile.PostedFile.ContentType
FileLength.Text = uploadFile.PostedFile.ContentLength
End sub
</script>
<html>
<form method="post" enctype="multipart/form-data" runat="server" id="UploadForm">
<div align="left">
<h1 align="center" class="template">EDIT IMAGE GALLERY</h1>
<p class="template">Select the file:
<br>
<input id="uploadFile" type="file" runat="server">
<br>
<input type="submit" value="Upload" OnServerClick="UploadFile_Clicked" runat="server">
The following file has been uploaded:
</p>
</div>
<span class="template">
<asp:Label ID="uploadFileName" runat="server" />
<br>
File Size:
<asp:Label ID="FileLength" runat="server" />
<br>
File Type:
<asp:Label ID="FileType" runat="server" />
<asp:label runat="server" id="lblMessage" Font-Italic="True" ForeColor="Red" />
</span>
<asp:DataGrid AlternatingItemStyle-BackColor="#eeeeee"
AutoGenerateColumns="false"
DataKeyField="FullName" Font-Name="Verdana"
HeaderStyle-BackColor="Navy" HeaderStyle-Font-Bold="True"
HeaderStyle-Font-Size="15pt" HeaderStyle-ForeColor="White" id="articleList" runat="server" Width="800"
OnDeleteCommand="articleList_DeleteFile"
OnItemDataBound="articleList_ItemDataBound">
<Columns>
<asp:ButtonColumn Text="Delete" ButtonType="PushButton" CommandName="Delete" />
<asp:HyperLinkColumn DataNavigateUrlField="Name" DataTextField="Name" HeaderText="File Name" />
<asp:BoundColumn DataField="LastWriteTime" HeaderText="Last Write Time"
ItemStyle-HorizontalAlign="Center" DataFormatString="{0:d}" />
<asp:BoundColumn DataField="Length" HeaderText="File Size"
ItemStyle-HorizontalAlign="Right" DataFormatString="{0:#,### bytes}" />
</Columns>
</asp:DataGrid>
</form>
</html>
In the HTML:
<asp:DataList id="DataList1" runat="server" Width="464px">
<ItemTemplate>
<%# DataBinder.Eval(Container.DataItem, "ProductNumber")%>
<asp:Image runat=server ImageUrl='<%#DataBinder.Eval(Container.DataItem, "Image")%>' ID="Image1"/>
</ItemTemplate>
</asp:DataList>
Then the code behind to set the values of the columns by binding to the Function GetData which returns a DataView:
DataList1.DataSource = GetData()
DataList1.DataBind()
Private Function GetData() As DataView
Dim dt As New DataTable
Dim dr As DataRow
dt.Columns.Add(New DataColumn("ProductNumber"))
dt.Columns.Add(New DataColumn("Image"))
dr = dt.NewRow()
dr(0) = "Product 1"
dr(1) = "yourimage.jpg"
dt.Rows.Add(dr)
dr = dt.NewRow()
dr(0) = "Product 2"
dr(1) = "yourimage.jpg"
dt.Rows.Add(dr)
Dim dv As New DataView(dt)
Return dv
End Function
There is a C# version of it here.
[msdn.microsoft.com ]
I converted it to VB.NET for my purposes. Think I might use this sometime.