Save and Display Images
| Generally in forum users ask how to save images and display images at same time. So, this article explain how to do this. I will be using FileUpload control and Datalist control, to display uploaded images into grid. I will also do validation for uploaded only images extension at client side when upload button has been clicked. If extension does not support then an error message appears. Download source code here. |
| Initially I created an method name as DisplayImages() where I map folder name Images. Then using DirectoryInfo class create an instance of that. With instance object I called method name GetFiles(), where I will get all images uploaded into that folder. |
| void DisplayImages() { string upFolder = MapPath("~/Images/"); DirectoryInfo dir = new DirectoryInfo(upFolder);
dlstImages.DataSource = dir.GetFiles(); dlstImages.DataBind(); } |
| Before uploading files, its necessary that we should validate only images extension file should be uploaded. That validation I had at client side. A method name IsValidateExtension() has been called at OnClientClick event of button upload. |
| function IsValidateExtension() { try {
var Extension = /(.gif|.png|.jpg|.jpeg)$/i; var FileName=document.getElementById("upImage").value;
if(FileName != null || FileName != "") { if (Extension.test(FileName)) { return true; } else { document.getElementById("<%=lblError.ClientID%>").innerHTML = "File extension not supported"; return false; } } } catch(e) { alert(e.message); } } |
| HTML mark up looks like below one :- <div> <asp:Label ID="lblImageFile" Text="Image File:" AssociatedControlID="upImage" runat="server" /> <asp:FileUpload ID="upImage" runat="server" BackColor="White" ForeColor="#333333" /> <br /> <br />
<asp:Button ID="btnUpload" Text="Upload" OnClick="btnUpload_Click" OnClientClick="return IsValidateExtension();" runat="server" BackColor="#99CCFF" ForeColor="Black" Font-Bold="False" Font-Italic="False" Font-Names="Verdana" /> <br /> <asp:Label ID="lblError" ForeColor="Red" runat="server" /> <br /> <br />
<div> <asp:DataList ID="dlstImages" RepeatColumns="3" runat="server"> <ItemTemplate> <asp:Image ID="Image1" ImageUrl='<%# Eval("Name", "~/Images/{0}") %>' Style="width: 200px" runat="server" /> <br /> <%# Eval("Name") %> </ItemTemplate> </asp:DataList> </div> </div> |
| Button upload at server side looks like below :- |
| protected void btnUpload_Click(object sender, EventArgs e) { if (upImage.HasFile) { String filePath = "~/Images/" + upImage.FileName; upImage.SaveAs(MapPath(filePath)); DisplayImages(); } } |
| Initially, screen looks like below. Note, if any images uploaded previously then that images will display in datalist. |
 |
| On click of upload button, first it will validate, then save into folder name Images, and finally it will display images using method name DisplayImages(), which I already explain on top. Note, I use one property of Datalist named RepeateColumns to display three images per row. |
 |
| I hope you like this article, download source of course has been given on top. |