ModalPopupExtender + FileUpload + Show Image on Page

Question

Hello,

I am trying to open a popup window on a button click "Upload" thru ModalPopupExtender. Below "Upload" btn I have an Image control to display the selected image.

In the popup window I have FileUpload, Image to show the selected image, Set & Cance btns. On click of FileUpload button, in code behind I just want to show the image on control in popup. On click of "Set" btn I want to save image on server & set & show in the form in Image control.  But once on Upload of FileUpload btns is clicked and control is gone to code behind, then the popup is Unloaded & not visible.

My Upload Btn & Image Control code :

<td>

<asp:Image runat="server" ID="panImg" BorderStyle="Ridge" BorderColor="Turquoise" Width="100px" Height="100px" />

</td>

<td>

<asp:LinkButton runat="server" id="panBtn"

CssClass="popup_a btn menu-green">Upload PAN

<span class="glyphicon glyphicon-chevron-down"></span>

</asp:LinkButton>

</td>

On clicking "Upload PAN" btn, a popup is opened using ModalExtender...

<ajaxToolkit:ModalPopupExtender ID="pan" runat="server"

TargetControlID="panBtn" PopupControlID="view_PanImages_popup"

RepositionMode="RepositionOnWindowResizeAndScroll" DropShadow="true"

PopupDragHandleControlID="uploadPanImage"

CancelControlID="cancelPan" OnUnload="pan_Unload"

BackgroundCssClass="modalBackground"></ajaxToolkit:ModalPopupExtender>

 

The Panel of Popup :

 

<asp:Panel id="view_PanImages_popup" CssClass="modalPopup" runat="server" Width="450px" Height="270px">

<asp:Label id="uploadPanImage" runat="server" CssClass="pop-title">Upload PAN Image</asp:Label>

<table class="table" style="width:100%;" >

<tr>

<td>

<asp:FileUpload runat="server" ID="panUploader" />

<asp:Button runat="server" ID="panUploadBtn" Text="Upload" OnClick="panUploadBtn_Click" />

</td>

<td>

<asp:Image runat="server" ID="showPanImg" BorderStyle="Ridge" BorderColor="Turquoise" Width="100px" Height="100px" />

</td>

</tr>

<tr>

<td colspan="2">

<asp:Label ID="panUploadStatusLbl" Text="" runat="server" CssClass="greenText" ></asp:Label> 

</td>

</tr>

</table>

<div class="one-row" style="text-align:right; margin-right:10px;">

<asp:LinkButton ID="okPanImg" runat="server" PostBackUrl="#" CssClass="btn menu-blue"

Style="background-color: green;" OnClick="okPanImg_Click">

<span class="glyphicon glyphicon-ok"></span> Set

</asp:LinkButton> 

<asp:LinkButton ID="cancelPan" runat="server" CssClass="btn cancel_button" >

<span class="glyphicon glyphicon-remove"></span> Cancel

</asp:LinkButton>

</div>

</asp:Panel>

In Code-behind, On fileUpload btn :

 

// Upload PAN Card Image

protected void panUploadBtn_Click(object sender, EventArgs e)

{

if (panUploader.HasFile)

{

try

{

string path = Server.MapPath("~/CRMImages/");

string mypath = "~/CRMImages/";

if (panUploader.PostedFile.ContentType == "image/jpeg")

{

if (panUploader.PostedFile.ContentLength < 102400)

{

string fileName = Path.GetFileName(panUploader.FileName);

panUploader.SaveAs(Server.MapPath("~/CRMImages/") + fileName); //IN SET

panImg.ImageUrl = mypath + fileName; // Set FORM Image - Want it on Set btn click

showPanImg.ImageUrl = mypath + fileName;  // Show Image on popup

panFileUrlTxt.Text = mypath + fileName;  // Saves path to a Textbox

System.Diagnostics.Debug.WriteLine("Image URL = " + panImg.ImageUrl);

}

else

{

panUploadStatusLbl.CssClass = "redText";

panUploadStatusLbl.Text = "File has to be less than 100kb";

}

}

else

{

panUploadStatusLbl.CssClass = "redText";

panUploadStatusLbl.Text = "Only JPEG files are accepted";

}

}

catch (Exception ex)

{

panUploadStatusLbl.CssClass = "redText";

panUploadStatusLbl.Text = "File could not be uploaded. Error occured: " + ex.Message;

}

}

}

I just want to simply have my FileUpload control in popup & show the selected file in popup & on confirmation of user save the image to server & show it on form Image Control.

How do I make popup visible after user clicks FileUpload upload event & popup is visible till user clicks either "Set" or "Cancel. Currently, on FileUpload upload btn (after code-behind) the popup is unloaded & have no chance to click "Set" or "Cancel" btns ??

Can you please help me out. Any help is highly appreciated.

Thanks