Sunday, September 21, 2008

how to upload a image to gridview?

It is a tiny application about “How to upload images?”. User shall provide username, browse file from local machine and once clicks on “add” button the details are saved (database or file system).
Please find the code above for your reference
In the above source code you can observe that the file(image) uploaded by client is saved using a class “UserDetailsData” which is created exclusively to save or retrieve user details which is user name and relative of the uploaded image file at server.
There 2 ways of uploading image file.
1) If you use data base , you create a table with column say “Image” whose data type should be BLOB (Binary Large Object).
While inserting a row into this table you can insert the byte stream of the image file uploaded at this column and while retrieving you should type cast the blob data to byte[] array and save into a file whose src should be used to a img tag to display.
2) The other way in Image column which can be Varchar , you can just save the uploaded image and save to application server local disk and whose file path can be saved in this Image column.
While retrieving you can read the path and assign it directly to img tag as src.

In the above example I have done it using (2) but since I am not Orcale data base server , so I used serialization concept to save user name and image file path into a data table and then writing the state of data table to a text file (Object persistence).

Regarding form view, what ever component we use to display , it might be grid view or form view it does the same thing.In the example i stated which i have done for grid view.For list view

<form id="form1" runat="server">
<asp:Label ID="lblmsg" runat="server"></asp:Label>
<table width="50%"><tr><td colspan="3">
<center>Upload Images</center>

<asp:FormView ID="frm_Dets" runat="server" Width="100%">
<HeaderTemplate><table width="100%"><tr><td style="width:20%">UserName</td><td>Snap</td></tr></table></HeaderTemplate>
<table width="100%">
<tr><td style="width:20%"><asp:Label ID="lblUserName" runat="server" Text='<%#Eval("User_name") %>'></asp:Label></td>
<td><img id="img_Snap" runat="server" src='<%#Eval("Image_URL") %>' title='<%#Eval("User_name") %>' style="width:100px" />

<asp:GridView ID="grd_Dets" runat="server" AutoGenerateColumns="false" Width="100%">
<HeaderTemplate>User Name</HeaderTemplate>
<ItemTemplate><asp:Label ID="lblUserName" runat="server" Text='<%#Eval("User_name") %>'></asp:Label></ItemTemplate>
<ItemStyle Width="20%" HorizontalAlign="center" />

<asp:TemplateField >
<img id="img_Snap" runat="server" src='<%#Eval("Image_URL") %>' title='<%#Eval("User_name") %>' style="width:100px" />
<ItemStyle Width="80%" HorizontalAlign="Center" />

<tr><td style="width:30%"><asp:TextBox ID="txtUserName" runat="server"></asp:TextBox></td>
<td style="width:60%"><asp:FileUpload ID="fl_upload" runat="server" /></td>
<td><asp:Button ID="btnAdd" runat="server" Text="Add" OnClick="btnAdd_Click" /></td>


private void BindGrid()
UserDetailsData objUserDetailsData = new UserDetailsData();
DataTable dt = objUserDetailsData.GetUserDetails(UserDtsFilePath);
//Created a seperate class called userdetailsdata.cs to read information from File which saves
//serialized databale about the username and url of the fileuploaded by user
if (dt != null)
//Binding to gridview.
grd_Dets.DataSource = dt;

//Binding to formview
frm_Dets.DataSource = dt;


1 comment: