Load a file using FileUpload control inside modal popup when using ModalPopupExtender

peter liles 556

No file is present when uploading ?

<asp:UpdatePanel ID="UpdatePanel1" runat="server"  UpdateMode="Conditional"  ChildrenAsTriggers="false"   >
      <ContentTemplate>
	<asp:FileUpload ID="FileUpload1" runat="server" CssClass="w3-bar-item"    />
	 </ContentTemplate>     <triggers>                      <asp:AsyncPostBackTrigger ControlID="BUploadtnMultipleFiles" EventName="Click" />                                     </triggers>     </asp:UpdatePanel>  
  <asp:Button ID="BUploadtnMultipleFiles" Text="Upload" runat="server" OnClick ="UploadMultipleFiles"   />

</div> 
    <asp:HiddenField ID="HiddenFieldBtnOpen" runat="server" /> 	   <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtenderDiscount" runat="server"    									 BackgroundCssClass="backgroundColor" BehaviorID="mpeD" DropShadow="true"  									 CancelControlID="closeBtn"  PopupControlID="mySidebar"   									 TargetControlID="HiddenFieldBtnOpen"  />

QiYou-MSFT 4,326 Reputation points Microsoft Vendor

2023-11-13T03:16:07.9866667+00:00

Hi @peter liles

The code you gave can't be tested.

1.To use asp:updatepanel and ajaxToolkit you have to add <asp:ScriptManager ID="ScriptManager1" runat="server" />

2.To use ajaxToolkit:ModalPopupExtender you have to add AjaxControlToolkit and add code to the page**<%@Register Assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>**

3.The UploadMultipleFiles method in your code is not given, and it is difficult for me to test further.

Best Regards

Qi You

peter liles 556

    Protected Sub UploadMultipleFiles(sender As Object, e As EventArgs)
 If FileUpload1 Is Nothing Then Return      
    If FileUpload1.HasFile Then                 
End If
end sub

basically i test if file is present and this informs me if am able to upload file. Which i am trying to do!

Ajaxtoolkit is registered inside my web.config file so no need to add to page.

7 answers

SurferOnWww 3,376 Reputation points

2023-11-13T03:13:37.3633333+00:00

The following Microsoft document will probably be able to help:

PostBackTrigger Class
Please sign in to rate this answer.
peter liles 556 Reputation points

2023-11-22T11:31:49.11+00:00

What is the purpose of updatepanel for fileupload if you want to also update another control outside such as gridview for images?
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.
Bruce (SqlWork.com) 68,081 Reputation points

2023-11-13T19:16:44.77+00:00

the update panel does not support the <fileupload> control. you need to use the ajaxToolkit:AsyncFileUpload control
Please sign in to rate this answer.
peter liles 556 Reputation points

2023-11-15T00:09:41.48+00:00

is it possible to use the updateprogress control along with AsyncFileUpload. While operating the ModalPopupExtender?

Bruce (SqlWork.com) 68,081 Reputation points

2023-11-15T01:36:25.3333333+00:00

Don’t know, don’t use webforms anymore. Even if I used webforms, I’d use vanilla JavaScript rather than the update panel and the ajax toolkit. The browser has added such good support for dynamic html, and file upload since these controls were written over a decade ago.

many of features of the toolkit are provided nativity by the browser.

peter liles 556 Reputation points

2023-11-22T11:34:06.6266667+00:00

using the javascript approach how would you also update images to display on same page as in a gridview once files are uploaded and saved?

Bruce (SqlWork.com) 68,081 Reputation points

2023-11-22T17:06:16.2333333+00:00

the FormData() object supports file uploads and both fetch and jquery ajax support it. google for dozens of examples.
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

QiYou-MSFT 4,326 Microsoft Vendor

Hi @peter liles

I modified your code, and your previous question was: Since your < asp:button > submitted, the page will be refreshed. Then you use asp:updatepanel which is a page refresh control, but you put asp:FileUpload together with asp:button and this doesn't do what you need.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Button ID="HiddenFieldBtnOpen" runat="server" Text="Modal" />
        <div class="Modalform"  id="mySidebar">
            <asp:ScriptManager ID="Script1" runaT="server"></asp:ScriptManager>
            <asp:FileUpload ID="FileUpload1" runat="server" CssClass="w3-bar-item"    />
       <asp:UpdatePanel ID="UpdatePanel1" runat="server"  UpdateMode="Conditional"  ChildrenAsTriggers="false"   >
      <ContentTemplate>
	
          <asp:Button ID="BUploadtnMultipleFiles" Text="Upload" runat="server" OnClick ="UploadMultipleFiles"   />    
	 </ContentTemplate>     <triggers>                      <asp:AsyncPostBackTrigger ControlID="BUploadtnMultipleFiles" EventName="Click" />                           

	                        </triggers>     </asp:UpdatePanel>  
  
</div> 
    <asp:HiddenField ID="HiddenField1" runat="server" /> 	   <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server"    									 BackgroundCssClass="backgroundColor" BehaviorID="mpeD" DropShadow="true"  									
        CancelControlID="closeBtn"  PopupControlID="mySidebar"   									
        TargetControlID="HiddenFieldBtnOpen"  />   
        <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtenderDiscount" runat="server" BackgroundCssClass="backgroundColor"
            BehaviorID="mpeD" DropShadow="true" CancelControlID="closeBtn"  PopupControlID="mySidebar" TargetControlID="HiddenFieldBtnOpen"  />      
    </form>
</body>
</html>

Case1

Best regards,
Qi You

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

peter liles 556 Reputation points

2023-11-16T15:22:32.5066667+00:00

i had to ignore first modalpopupextender as you have added two in your example illustration? but still i cannot get it to work. the Hasfile property always returns false?

it is a interesting setup compared to own.

i was curious to know how would you go about setup of updatepanel in this scenario where i have fileupload control as previous shown within a modalpopup and a gridview on same page that downloads images from database after they have been saved, during postback.

Actually my page has multiple fileupload controls in series together with textbox controls so that i may enter a description and then display within gridview when fileuploaded during page postback.
Please sign in to rate this answer.

0 comments No comments
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.
QiYou-MSFT 4,326 Reputation points Microsoft Vendor

2023-11-17T07:53:48.72+00:00
Hi @peter liles

I will give you an idea: Use iframe tags.

WebForm1.aspx:

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> <asp:UpdatePanel ID="up_attachment" runat="server" Mode="Conditional"> <ContentTemplate> <iframe id="file" name="file" src="File.aspx"></iframe> </ContentTemplate> </asp:UpdatePanel> </form> </body> </html>

File.aspx:

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> <asp:FileUpload ID="FileUpload1" runat="server" /> <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" /> <asp:TextBox ID="TextBox1" runat="server" Text="Submit"></asp:TextBox> </div> </form> </body> </html>

protected void Button1_Click(object sender, EventArgs e) { TextBox1.Text = FileUpload1.HasFile.ToString(); }

OutPut:

Best regards,
Qi You

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.
peter liles 556 Reputation points

2023-11-22T11:38:43.79+00:00

i had a go using iframe and experienced problems sending data parameters to the iframe page and also updating parent page with changes i.e images. another problem still is getting a progress meter to work whilst waiting to upload multiple files as it appears the modalpopup interferes with operation?

QiYou-MSFT 4,326 Reputation points Microsoft Vendor

2023-11-23T06:57:16.97+00:00

Hi @peter liles

In fact, I used iframes before because asp:updatepanel doesn't support asp:fileload. In other words**asp:fileload** does not support local refreshes.

But you mentioned later that you need to display the uploaded image on the page, then I'll help you change the previous code.

First of all, you don't use asp:updatepanel.

Second, you can add it at the end of asp:updatepanel:

<Triggers> <asp:PostBackTrigger ControlID="Button1" /> </Triggers>

You can see this document for more information, which clearly explains why.

PostBackTrigger Class

Best Regards

Qi You

peter liles 556 Reputation points

2023-11-23T15:54:17.3866667+00:00

I decided to move textbox descriptive fields associated with fileupload controls, which were many, to the image gridview control to be updated after fileupload processing. This way i need only one multiple fileupload and i can place that direct under the images displayed using full page postback.

Its a case of improving the structure of modules i have already made.

QiYou-MSFT 4,326 Reputation points Microsoft Vendor

2023-11-24T08:36:48.3133333+00:00

Hi @peter liles

In general, the asp:fileupload control cannot be used in the UpdatePanel, because asynchronous postbacks cannot upload files, so you need to use PostBackTrigger to force synchronous postbacks.

asp:fileupload cannot upload files asynchronously, so asp:AsyncPostBackTrigger cannot be used.

<form id="form1" runat="server"> <div> <asp:FileUpload ID="FileUpload1" runat="server" /> <asp:Image ID="Image1" runat="server" Width="300px" Height="300px"/> </div> <div> <asp:FileUpload ID="FileUpload2" runat="server" /> <asp:Image ID="Image2" runat="server" Width="300px" Height="300px"/>\ </div> <div> <asp:FileUpload ID="FileUpload3" runat="server" /> <asp:Image ID="Image3" runat="server" Width="300px" Height="300px"/> </div> <div> <asp:Button ID="Button1" runat="server" Text="submit" OnClick="Button1_Click" /> </div> </form>

This way, you can upload all the files you need to upload at once, and finally upload and display them with a single button.

Finally, I want to emphasize that asp:fileupload cannot be uploaded asynchronously.

Best Regards

Qi You
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

Load a file using FileUpload control inside modal popup when using ModalPopupExtender

7 answers

Your answer