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