FileUploadControl uploading and saving images and showing in DataList dynamically

Nikhil Kumar
14y
11.1k
0
0

Blog

Here by this article we learn how to use FileUploadControl to upload Images in a folder under your web project and show them in a DataList control by using image control under ItemTemplate.

First-

In the Default.aspx page create a label, FileUploadControl; button and a DataList Control then Under ItemTemplate add an image control…

Default.aspx

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

<!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>Upload Control:DataList</title>
</head>
<body>
   <form id="form1" runat="server">
   <div>
   <asp:Label ID="lbl" runat="server">Please upload your image...</asp:Label>
   <br />
   <asp:FileUpload ID="fileupload" runat="server" Width="273px" />
   <br />
   <br />
   <asp:Button ID ="btnadd" runat="server" Text="Add Image" OnClick="btnadd_Click" />
   <hr />
   <asp:DataList ID="dl" runat="server" Height="123px" RepeatColumns="2" Width="97px" >
   <ItemTemplate>
   <asp:Image ID="img" runat="server" Width="200px" ImageUrl='<%# Eval("Name", "~/UploadedFiles/{0}") %>' />
   <br />
   <%#Eval("Name") %>

    </ItemTemplate>
   </asp:DataList>
   </div>
   </form>
</body>
</html>

Second:

Now add this C# code for doing all the activities…

Default.aspx.cs

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.IO;
public partial class _Default : System.Web.UI.Page
{
   protected void Page_Load(object sender, EventArgs e)
   {
   }
   protected void btnadd_Click(object sender, EventArgs e)
   {
   if (fileupload.HasFile)
   {
   if (CheckFileType(fileupload.FileName))
   {
   string filepath = "~/UploadedFiles/" + fileupload.FileName;
   fileupload.SaveAs(MapPath(filepath));
   }
   }
   }
   bool CheckFileType(string fileName)
   {
   string ext = Path.GetExtension(fileName);
   switch (ext.ToLower())
   {
   case ".gif":
   return true;
   case ".png":
   return true;
   case ".jpg":
   return true;
   case ".jpeg":
        return true;
   default:
   return false;
   }
   }
   void Page_PreRender()
   {
   string upFolder = MapPath("~/UploadedFiles/");
   DirectoryInfo dir = new DirectoryInfo(upFolder);
   dl.DataSource = dir.GetFiles();
   dl.DataBind();
   }
}

Declaration:

Here is a function named CheckFileType using for checking the file type which we are going to upload

This fuction allows only four types of image files if there is another type it will trow error, so this is for restriction.

btnadd_Click is using to show the images in imagecontrol.

HasFile is using to check there is there any file uploaded or not.

SaveAs enables you to save the uploaded file to the file system.

FileName—Enables you to get the name of the uploaded file.

Here we used _

<asp:Image ID="img" runat="server" Width="200px" ImageUrl='<%# Eval("Name", "~/UploadedFiles/{0}") %>' />

If you don’t specify the Width then the output would look bad, because images show in real size but now every uploaded image show in 200px width.

Another point to learn is UploadedFiles this is a folder created in Solution Explorer in current website

When you click the btnadd button that image will save in UploadedFiles folder its good because we don’t have to learn the path if we save this in system folder.