Please disable your adblock and script blockers to view this page
 

How to maintain image on PostBack in FileUpload control in asp.net(C#,VB)

Introduction: In previous articles i explained jQuery to validate file extension and upload image file and Bind,upload,download,delete image files from the GridView and Upload file and create Zip file and Check and validate file extension before uploading a file through FileUpload control and FileUpload Control in Update Panel using asp.net.
In this article i am going to explain with example How to keep/maintain image in the file upload control on occurring of post back event in asp.net using both the C# and VB.Net language.
Maintain image in FileUpload control in postback example in asp.net

Description: One of the common annoying problem that developer face while creating Asp.net application is to maintain the image on PostBack i.e. When we browse and select an image in FileUpload control and PostBack occurs before final submission then FileUpload control looses its value and we have to again select the image.

 There is no other way I found on the internet to maintain the state of the FileUpload control or Keep/Retain the selected image in FileUpload control. But I found an alternative way to handle this situation. As we know Session can store any object so we can store the FileUpload control in the session object and in PostBack we can get the value back from it. 

Implementation: Let's create an example to understand better.
  • In the <BODY> tag of the design page (.aspx) Place a FileUpload Control, a Label control and a CheckBoxList Control as shown : 
Source Code:

<fieldset style="width:350px">
            <legend>Retain Image name in FileUpload control on PostBack</legend>
            <asp:FileUpload ID="FileUpload1" runat="server" /><asp:Label ID="lblImageName" runat="server" ForeColor="#FF3300"></asp:Label>
        <asp:CheckBoxList ID="CheckBoxList1" runat="server" AutoPostBack="true" RepeatColumns="3">
            <asp:ListItem>Asp.net</asp:ListItem>
            <asp:ListItem>Sql Server</asp:ListItem>
            <asp:ListItem>Javascript</asp:ListItem>
            <asp:ListItem>JQuery</asp:ListItem>
            <asp:ListItem>LINQ</asp:ListItem>
            <asp:ListItem>WCF</asp:ListItem>
        </asp:CheckBoxList>  
        </fieldset>

Note:  AutoPostBack property of CheckBoxList control is set to true to cause Postback.

C#.NET Code to maintain/retain image on PostBack in FileUpload control in asp.net
  • In the code behind file(.aspx.cs) write the code on page load event as:
protected void Page_Load(object sender, EventArgs e)
        {
            //Case: 1 When the page is submitted for the first time(First PostBack) and there is file 
            // in FileUpload control but session is Null then Store the values to Session Object as:
            if (Session["FileUpload1"] == null && FileUpload1.HasFile)
            {
                Session["FileUpload1"] = FileUpload1;
                lblImageName.Text = FileUpload1.FileName;
            }
            // Case 2: On Next PostBack Session has value but FileUpload control is
            // Blank due to PostBack then return the values from session to FileUpload as:
            else if (Session["FileUpload1"] != null && (!FileUpload1.HasFile))
            {
                FileUpload1 = (FileUpload)Session["FileUpload1"];
                lblImageName.Text = FileUpload1.FileName;
            }
            // Case 3: When there is value in Session but user want to change the file then
            // In this case we need to change the file in session object also as:
            else if (FileUpload1.HasFile)
            {
                Session["FileUpload1"] = FileUpload1;
                lblImageName.Text = FileUpload1.FileName;
            }
        }

VB.NET Code to maintain/retain image on PostBack in FileUpload control in asp.net
  • In the code behind file(.aspx.vb) write the code on page load event as: 
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        'Case: 1 When the page is submitted for the first time(First PostBack) and there is file
        '  in FileUpload control but session is Null then Store the values to Session Object as:
        If Session("FileUpload1") Is Nothing AndAlso FileUpload1.HasFile Then
            Session("FileUpload1") = FileUpload1
            lblImageName.Text = FileUpload1.FileName
            ' Case 2: On Next PostBack Session has value but FileUpload control is
            ' Blank due to PostBack then return the values from session to FileUpload as:
        ElseIf Session("FileUpload1") IsNot Nothing AndAlso (Not FileUpload1.HasFile) Then
            FileUpload1 = DirectCast(Session("FileUpload1"), FileUpload)
            lblImageName.Text = FileUpload1.FileName
            ' Case 3: When there is value in Session but user want to change the file then
            ' In this case we need to change the file in session object also as:
        ElseIf FileUpload1.HasFile Then
            Session("FileUpload1") = FileUpload1
            lblImageName.Text = FileUpload1.FileName
        End If
    End Sub

Now over to you:
"If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates."
Previous
Next Post »

7 comments

Click here for comments
rohan
admin
October 23, 2013 ×

Not working on server

Reply
avatar
October 24, 2013 ×

Hi rohan, what problem you are facing on server?

Reply
avatar
Anonymous
admin
January 01, 2014 ×

hi, i am craeating file upload control in run time(dynamic).
When i clicked upload button,then fileupload.hasfile value is false.My uploaded file not displaying.

Please help me regarding this problem.

Reply
avatar
Anonymous
admin
January 29, 2014 ×

how to show image and text randomly from database

Reply
avatar
Anonymous
admin
September 05, 2014 ×

Thanks :)

Reply
avatar
Mei Yi
admin
February 02, 2015 ×

Hi, How do I retain image in picture box also? Thanks.

Reply
avatar

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily.. ConversionConversion EmoticonEmoticon