Preview picture in gridview without using Handler

Question

0.00/5 (No votes)

See more:

Hi all

My problem is related to gridview

I have a gridview like this

<asp:GridView ID="gdvstudent" runat="server" AutoGenerateColumns="False" AutoGenerateEditButton="True"
            CellPadding="4" AllowSorting="True" OnSorting="gdvstudent_Sorting" ForeColor="#333333"
            ShowFooter="true" SortedAscendingCellStyle-BackColor="Blue" HorizontalAlign="Center"
            AllowPaging="True" PageSize="5" Width="754px">
            <alternatingrowstyle backcolor="White" />
            <columns>
                <asp:TemplateField HeaderText="Student Name" SortExpression="txt_student_name">
                    <itemtemplate>
                        <%#Eval("txt_student_name")%></itemtemplate>
                    <edititemtemplate>
                        <asp:TextBox ID="txtStudentName" runat="server" Text='<%#Eval("txt_student_name")%>'>
                    </edititemtemplate>
                
                <asp:TemplateField HeaderText="Student Roll" SortExpression="txt_student_roll">
                    <itemtemplate>
                        <%#Eval("txt_student_roll")%></itemtemplate>
                    <edititemtemplate>
                        <asp:Label ID="txtstudentroll" runat="server" Text='<%#Eval("txt_student_roll")%>'>
                    </edititemtemplate>
                
                <asp:TemplateField HeaderText="Student class" SortExpression="txt_student_class">
                    <itemtemplate>
                        <%#Eval("txt_student_class")%></itemtemplate>
                    <edititemtemplate>
                        <asp:TextBox ID="txtstudentclass" runat="server" Text='<%#Eval("txt_student_class")%>'>
                    </edititemtemplate>
                
                <asp:TemplateField HeaderText="Student Marks" SortExpression="txt_student_marks">
                    <itemtemplate>
                        <%#Eval("txt_student_marks")%></itemtemplate>
                    <edititemtemplate>
                        <asp:TextBox ID="txtstudentmarks" runat="server" Text='<%#Eval("txt_student_marks")%>'>
                    </edititemtemplate>
                
                <asp:TemplateField HeaderText="Student DOB" SortExpression="txt_student_dob">
                    <itemtemplate>
                        <%#Eval("txt_student_dob")%></itemtemplate>
                    <edititemtemplate>
                        <asp:TextBox ID="txtstudentdob" runat="server" Text='<%#Eval("txt_student_dob")%>'>
                    </edititemtemplate>
                
                <asp:TemplateField HeaderText="Student Resume">
                    <itemtemplate>
                        <asp:LinkButton runat="server" ID="student_resume" CommandArgument='<%# Bind("student_resume") %>'
                            Visible="false" OnClick="DownloadFile" Text="Resume">
                        
                    </itemtemplate>
                    <edititemtemplate>
                        <asp:FileUpload ID="fileupload" FileName='<%# Bind("student_resume") %>' runat="server">
                        
                    </edititemtemplate>
                
                <asp:TemplateField HeaderText="Student Picture">
                    <itemtemplate>
                        <asp:Image runat="server" ID="student_Pic" src='<%# "frmImageHandler.ashx?student_Pic=" + Eval("student_Pic")%>'
                            ImageAlign="Middle" AlternateText="Insert Picture">
                    </itemtemplate>
                    <edititemtemplate>
                        <asp:FileUpload ID="fileupload1" FileName='<%# Bind("student_pic") %>' runat="server">
                        
                    </edititemtemplate>
                
                <asp:TemplateField HeaderText="Edited" Visible="False">
                    <itemtemplate>
                        <asp:CheckBox ID="ChkboxEdit" runat="server" Checked='<%#Eval("edited")%>' />
                    </itemtemplate>
                    <edititemtemplate>
                        <asp:CheckBox ID="ChkboxEdit" runat="server" Checked='<%#Eval("edited")%>' />
                    </edititemtemplate>
                
            </columns>
            <footerstyle backcolor="#990000" font-bold="True" forecolor="White" />
            <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
            <pagerstyle backcolor="#FFCC66" forecolor="#333333" horizontalalign="Center" />
            <rowstyle backcolor="#FFFBD6" forecolor="#333333" />
            <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
            <sortedascendingcellstyle backcolor="Azure" />
            <sortedascendingheaderstyle backcolor="Aqua" />
            <sorteddescendingcellstyle backcolor="Blue" />
            <sorteddescendingheaderstyle backcolor="BlueViolet" />

Now What i want to achieve is after I click in to edit button and through upload button upload a picture it will show in the respective cell as preview, the picture is neither saved in database nor save physically through the FileUpload.SaveAs() option.

To achieve this in gdvstudent_RowUpdating() event i convert the image in byte[] and then try to again convert it in to image by context.Response.BinaryWrite(sqlRdr("Image")) but failed.

May be my method is wrong, there might have some easy way to do this so please help me.
Note: 1. No database save
2. No physical path save
3. only preview of the image

It will done when user hit save button, after editing the gridview.

Posted 18-Dec-12 1:46am

Banerjee Tanmoy

Updated 18-Dec-12 1:52am

Krunal Rohit

v2

Add a Solution

Comments

[no name] 18-Dec-12 9:30am

you want to preview in server side or client side?

Banerjee Tanmoy 19-Dec-12 1:31am

Thank u sir for your quick reply . But i need this in grid view and in client side.
Can u please specify the solution for that.

[no name] 19-Dec-12 2:02am

please, follow the solution 1. I already given you that code.

Banerjee Tanmoy 19-Dec-12 7:15am

That means you are suggesting that i should add attribute in gridview cell editing which call the javascript function, to do the work
I am new in .net
it shows the preview image in ImagePreview location not in the respective row where i am uploading the data

[no name] 19-Dec-12 8:26am

Please, Explain your problem briefly.

Banerjee Tanmoy 19-Dec-12 8:32am

I have a gridview, it has edit button when user click on it a picture upload option viewed in the respective cell when user upload the picture it shows in that grid cell, after click on the update button.
What I have done so far is :
<asp:TemplateField HeaderText="Student Picture">
<itemtemplate>
<asp:Image runat="server" ID="student_Pic" ImageUrl="~/frmImagePrev.aspx" ImageAlign="Middle" AlternateText="Insert Picture">

<edititemtemplate>
<asp:FileUpload ID="fileupload1" FileName='<%# Bind("student_pic") %>' runat="server">

and i convert the picture in Bytes() and loads in to session and then in frmImagePrev.aspx page load event i converted again in image from session. but i failed to bound in the respective cell it shows in all the cells throughout the grid.

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Member 10510822 · Answer 1 · 2012-12-18T03:34:00

XML

<form id="form1" runat="server">
   <div>

       <img id="ImagePreview"  src="" />
       <input type="file" id="files" name="files[]" multiple />

       <script type="text/javascript">


           function handleFileSelect(evt) {
               var fileUpload = document.getElementById('files');
               var files = evt.target.files; // FileList object

               for (var i = 0, f; f = files[i]; i++) {
                   var reader = new FileReader();
                   var base64Data;
                   reader.onload = (function (theFile) {
                       return function (e) {
                           base64Data = e.target.result;
                           document.getElementById('ImagePreview').src = base64Data;
                       };
                   })(f);
                   // Read in the image file as a data URL.
                   reader.readAsDataURL(f);
               }
           }

           document.getElementById('files').addEventListener('change', handleFileSelect, false);
       </script>

       <div>
       </div>
   </div>
   </form>

This is the sample code to preview the image in image control without any postback.

Member 10510822 · Answer 2 · 2012-12-19T02:56:00

Ok, According to your explanation, you want to use the image in different page, is it?
First of all your error is in:

ASP.NET

<asp:image runat="server" id="student_Pic" imageurl="~/frmImagePrev.aspx" imagealign="Middle" alternatetext="Insert Picture" xmlns:asp="#unknown"></asp:image>

it should be:

~/frmImagePrev.aspx

<a href="WebForm2.aspx">
    <asp:Image runat="server" ID="student_Pic" ImageUrl="~/images/image_link.jpg"  ImageAlign="Middle" AlternateText="Insert Picture"/>
    </a>

because you are using the image as a image button ok?
next, you want to keep your image value on session( according to your explanation) right?
I will suggest you no to store image byte in session because, image byte in session will make your page to slow. you can find alternative way.

but if you really want to store image byte[] in session then convert the image to byte[] then store the byte[] value in session, not only image name.

again I am requesting you that your explanation is not 100% clear to me.

Thank you.

Rashed::Bangladesh.

Banerjee Tanmoy · Answer 3 · 2012-12-19T21:42:00

I think my explanation is not clear to u
Lets take a example
Requirement :
1. There is one gridview
2. It must have edit/delete button in every row

AutoGenerateEditButton="True"

using this in gridview.
3. When user click in the edit button the entire row (Where user click) shows the update and cancel button and grid opened in editable mode. According to my grid it have two fileupload option
My grid is

XML

<asp:GridView ID="gdvstudent" runat="server" AutoGenerateColumns="False" AutoGenerateEditButton="True"
            CellPadding="4" AllowSorting="True" OnSorting="gdvstudent_Sorting" ForeColor="#333333"
            ShowFooter="true" SortedAscendingCellStyle-BackColor="Blue" HorizontalAlign="Center"
            AllowPaging="True" PageSize="5" Width="754px">
            <AlternatingRowStyle BackColor="White" />
            <Columns>
                <asp:TemplateField HeaderText="Student Name" SortExpression="txt_student_name">
                    <ItemTemplate>
                        <%#Eval("txt_student_name")%></ItemTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="txtStudentName" runat="server" Text='<%#Eval("txt_student_name")%>'></asp:TextBox>
                    </EditItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Student Roll" SortExpression="txt_student_roll">
                    <ItemTemplate>
                        <%#Eval("txt_student_roll")%></ItemTemplate>
                    <EditItemTemplate>
                        <asp:Label ID="txtstudentroll" runat="server" Text='<%#Eval("txt_student_roll")%>'></asp:Label>
                    </EditItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Student class" SortExpression="txt_student_class">
                    <ItemTemplate>
                        <%#Eval("txt_student_class")%></ItemTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="txtstudentclass" runat="server" Text='<%#Eval("txt_student_class")%>'></asp:TextBox>
                    </EditItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Student Marks" SortExpression="txt_student_marks">
                    <ItemTemplate>
                        <%#Eval("txt_student_marks")%></ItemTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="txtstudentmarks" runat="server" Text='<%#Eval("txt_student_marks")%>'></asp:TextBox>
                    </EditItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Student DOB" SortExpression="txt_student_dob">
                    <ItemTemplate>
                        <%#Eval("txt_student_dob")%></ItemTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="txtstudentdob" runat="server" Text='<%#Eval("txt_student_dob")%>'></asp:TextBox>
                    </EditItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Student Resume">
                    <ItemTemplate>
                        <asp:LinkButton runat="server" ID="student_resume" CommandArgument='<%# Bind("student_resume") %>'
                            Visible="false" OnClick="DownloadFile" Text="Resume">
                        </asp:LinkButton>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:FileUpload ID="fileupload" FileName='<%# Bind("student_resume") %>' runat="server">
                        </asp:FileUpload>
                    </EditItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Student Picture">
                    <ItemTemplate>
                        <asp:Image runat="server" ID="student_Pic" ImageUrl="~/frmImagePrev.aspx" ImageAlign="Middle" AlternateText="Insert Picture"></asp:Image>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:FileUpload ID="fileupload1" FileName='<%# Bind("student_pic") %>' runat="server">
                        </asp:FileUpload>
                    </EditItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Edited" Visible="False">
                    <ItemTemplate>
                        <asp:CheckBox ID="ChkboxEdit" runat="server" Checked='<%#Eval("edited")%>' />
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:CheckBox ID="ChkboxEdit" runat="server" Checked='<%#Eval("edited")%>' />
                    </EditItemTemplate>
                </asp:TemplateField>
            </Columns>
            <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
            <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
            <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
            <SortedAscendingCellStyle BackColor="Azure" />
            <SortedAscendingHeaderStyle BackColor="Aqua" />
            <SortedDescendingCellStyle BackColor="Blue" />
            <SortedDescendingHeaderStyle BackColor="BlueViolet" />
        </asp:GridView>

One for the resume upload and one for picture upload.
When user updated the information and upload its resume and picture and hit in the upload button the row again come back to select mode and the respective cell in that row where picture has been uploaded shows the picture.

4. The picture must not save in the database or in physical path while uploading / editing.

Clarification:
1. I don't want to save the image in session. Because all of my experiment gone into vain so i decide to make an item template like this

<asp:templatefield headertext="Student Picture" xmlns:asp="#unknown">
                    <itemtemplate>
                        <asp:image runat="server" id="student_Pic" imageurl="~/frmImagePrev.aspx" imagealign="Middle" alternatetext="Insert Picture"></asp:image>
                    </itemtemplate>
                    <edititemtemplate>
                        <asp:fileupload id="fileupload1" filename="<%# Bind("student_pic") %>" runat="server">
                        </asp:fileupload>
                    </edititemtemplate>
                </asp:templatefield>

here

ImageUrl="~/frmImagePrev.aspx"

line redirect in the

frmImagePrev.aspx

page and then it shows the picture in all the cells throughout the grid view.

Write now i am stuck here.

2. but this is my approach i need to achieve the goal not the approach.

I think i am clear now what i need. If more explanation needed i am happy to give u it full code is needed pls give me the mail id i can send it to you.
Thanking you : Tanmoy (INDIA)

Preview picture in gridview without using Handler

3 solutions

Solution 1

Solution 3

Solution 4

Add your solution here

Preview 0