Search code examples
asp.netupdatepanelmodalpopupextender

AsyncPostBack FileUpload on a ModalPopup


I am using a UpdatePanel, and my submit button is one of the triggers along with the clear button. But the problem is I have a FileUpload Control in the div. This is a modal popup, so it displays a form for a user to upload a little note. When I try to upload a file with AsyncPostBackTrigger it does nothing (which I have read about). My question is how do I not use the PostBackTrigger because I want to use the asyncpostbacktrigger because if an error occurs, then the Modal popup closes and the user doesnt know if the file was uploaded or not. What can I do?

Code:

<asp:Panel ID="addnotepanel" runat="server" style="/*display:none;*/" CssClass="addnotepanel">
<asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate>
            <asp:FileUpload ID="FileUpload1" runat="server" />
        &nbsp;<br />
        </ContentTemplate>
        <Triggers>
                <asp:AsyncPostBackTrigger ControlID="ClrBtn" />
                <asp:PostBackTrigger ControlID="SubmitBtn" />
                </Triggers>
            </asp:UpdatePanel>
                    File:

            <br />
            <asp:Label ID="ErrorLabel" runat="server" Visible="False"></asp:Label>
            <br />
            <asp:Button ID="Submitbtn" runat="server" Text="Submit" 
                onclick="Submitbtn_Click" />
&nbsp;<asp:Button ID="CnlBtn" runat="server" Text="Cancel" onclick="CnlBtn_Click" />
            &nbsp;<asp:Button ID="ClrBtn" runat="server" onclick="ClrBtn_Click" 
                Text="Clear" />
&nbsp; </div></asp:Panel>

Solution

  • keep SubmitBtn as a PostBackTrigger but dont set it as the "OkControlID" of the modalpopupextender.

    in the Submitbtn_Click server side sub, call yourModalpopupextenderID.hide() if the upload is completed so the Modal pop up closes only if there is no error.

    You could use a AsyncFileUpload from the AjaxControlToolkit Here, as an exemple some code to show how to use it :

     <AjaxControlToolkit:AsyncFileUpload ID="AttachementsFileUpload" 
                                                        runat="server" 
                                                        OnUploadedComplete="AttachementsFileUpload_UploadedComplete"
                                                        OnClientUploadComplete="uploadComplete" />
    
    
    
    <script type="text/javascript">
             var UpdateAttachementsGridViewButton = '<%= UpdateAttachementsGridViewButton.ClientID %>';
             function uploadComplete(sender, args) {
                 $get(UpdateAttachementsGridViewButton).click();  
    
             }   
        </script>
    

    As you see, when the upload is complete, I use Javascript to trigger an click on an hidden button. Meanwhile I retrieve the file in the AttachementsFileUpload_UploadedComplete using something like this:

    Dim AttachementsFileUpload As AjaxControlToolkit.AsyncFileUpload = AnnouncementFormView.FindControl("AttachementsFileUpload")
        Attachements.add(e.filename, AttachementsFileUpload.FileBytes)
    

    It's how I used it in my situation, but you will find plenty of examples on how it work