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

Question

No file is present when uploading ?

<div class="Modalform" style="display:none;" id="mySidebar">

<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"  />      

Answer 1

two questions related to the iframe

1. the gridview for display images. is it added to the main parent page, not iframe. and will it be refreshed to show recent saved images?
2. can the iframe be initial blank. as i would prefare to inform user to add images before the iframe page appears.

Answer 2

Ok, lets break this down a bit.

As noted, the standard upload control requires a full page post back. (this is the standard in HTML specifications).

Of course, if you drop in a update panel, then a update panel = "please do not do a full page post back"!

In other words, the WHOLE idea of a update panel is to prevent a page post back, but then we trying to use the file upload control, which of course means we require a full page post back for the file upload control to work!

So, in effect we much stuck.

However, as pointed out, we can use one of several ajax upload controls, and these controls are not only "nice" with fancy features like progress bars, and nice cancel buttons during uploading, but since they don't use nor require a post back?

Well, then such controls work rather nice in a popup dialog. And they work even if you up-load a file. I should point out that in NEAR ALL cases, any post-back on a page WILL collapse the dialog. However, since we don't have a post-back with such controls, then often we can pop up a dialog and not even require a update panel.

The ONLY reason why you would want to use a update panel is in the case that you popup dialog ALSO needs to have some post backs. I find that in most cases, such dialogs may well have some options, but post backs are not required for the final "ok" or whatever button.

So, the decision to use/have/enjoy a update panel AND ALSO a popup dialog together is not a requirement unless the dialog has to do additional things with additional button clicks etc. (and thus require a post back).

So, in this dialog (a jQuery.UI one), I have a up-loader control. The user can type in some comments, and upload 1 or 10 files. All of this works fine, since as noted the ajax uploader control does not require a post back.

So, I have this:

As you can see, we have a popup dialog, and we are able to select multiple files, and then upload. Since we are using a ajax uploader, then no post backs are required, and thus we don't really need to place everything inside of a update panel.

However, we ARE free to use and have post-backs. Just remember that the standard HTML up-loader requires a full page post-back, and thus you really can't use the default up-load control. The above example is using the AjaxFileUploader from the ajaxtoolkit. And there are good many other choices, but at the end of the day, the suggesting here is to adopt a nice "ajax" file upload control for this purpose. Not only does the above show a progress bar, but the user is free to add "many" files for the upload. I can post some additional markup and code, but the basic idea here is that you need a better upload control then the default HTML one.

Edit: ---------------------- sample code

So, let's keep this simple. We will have a gridview (to display files uploaded), and then have a popup to upload one or "many" files inside of the popup dialog.

So, we assume:

Ajaxtoolkit: AjaxFileUpload control.

jQuery (don't we all have this!)

jQuery.UI this is separate from jQuery, and has a whole bunch of really nice widgets, including the dialog one. While one can use the popup dialog from the ajax toolkit, I find the jQuery.UI one a much better choice, and thus I use jQuery.UI dialog here.

So, first part is easy, a button (to pop the dialog) and a grid view.

A hidden button right after that first button. This is a "lazy" approach to having code behind run triggered by JavaScript (I have js click that hidden button).

then the grid view.

So, this markup:

            <asp:Button ID="cmdUpLoadFiles" runat="server" Text="Upload Files"
                CssClass="btn btn-lg"
                OnClientClick="popupload(this);return false"                
                />
            <asp:Button ID="cmdReLoad" runat="server" Text="reload" 
                OnClick="cmdReLoad_Click" ClientIDMode="Static"
                style="display:none"
                />


            <h3>Files uploaded</h3>
            <asp:GridView ID="GVFiles" runat="server" AutoGenerateColumns="False"
                DataKeyNames="ID" CssClass="table table-hover" Width="35%">
                <Columns>
                    <asp:BoundField DataField="UserName" HeaderText="User Name" />
                    <asp:BoundField DataField="UpLoadDate" HeaderText="Uploaded" />
                    <asp:BoundField DataField="FileName" HeaderText="File" />
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:Image ID="Image1" runat="server" Width="100px"
                                ImageUrl='<%# "~/UpLoadFiles/" & Eval("FileName") %>'
                                />

                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Download" ItemStyle-HorizontalAlign="Center">
                        <ItemTemplate>
                         <button id="cmdDownLoad" runat="server" class="btn" 
                             onserverclick="cmdDownLoad_ServerClick"  
                            >
                            <span aria-hidden="true" class="glyphicon  glyphicon-cloud-download"></span>
                        </button>

                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>

And right after above, we have a "div" that will become our pop dialog, and the popup code (client side).

            <div id="MyDialog" style="display: none">

                <h4>Select PDF Files to upload</h4>
                <br />
                <ajaxToolkit:AjaxFileUpload ID="AjaxFileUpload1" runat="server"
                    OnUploadComplete="AjaxFileUpload1_UploadComplete"
                    />
            </div>

                <script>

                    function popupload(btn) {

                        myDialog = $("#MyDialog")
                        myDialog.dialog({
                            title: "Upload files",
                            modal: true,
                            position: { my: "left top", at: "right bottom", of: btn },
                            dialogClass: "bshadow1",
                            width: "30%",
                            buttons: {
                                Ok: function () {
                                    myDialog.dialog('close')
                                    $('#cmdReLoad').click()
                                },
                                Cancel: function () {
                                    myDialog.dialog('close')
                                }
                            }
                        })
                    }

                </script>

Our code behind is just plain code, and this:

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        If Not IsPostBack Then
            Session("UserName") = "Albert"
            LoadGrid()
        End If
    End Sub


    Sub LoadGrid()

        GVFiles.DataSource = MyRst("SELECT * FROM MyFiles ORDER BY UpLoadDate")
        GVFiles.DataBind()

    End Sub


    Protected Sub cmdReLoad_Click(sender As Object, e As EventArgs)

        LoadGrid()

    End Sub

The upload (save file code) saves the file, and adds one row to the MyFiles table (that feeds the gridview of files).

    Protected Sub AjaxFileUpload1_UploadComplete(sender As Object, e As AjaxControlToolkit.AjaxFileUploadEventArgs)

        ' save file to UpLoadFiles folder
        Dim strF As String = Server.MapPath($"~/UpLoadFiles/{e.FileName}")

        AjaxFileUpload1.SaveAs(strF)

        ' add this row to database.

        Using conn As New SqlConnection(My.Settings.TEST4)
            Using cmdSQL As New SqlCommand("INSERT INTO MyFiles 
                                           (UserName, FileName, SaveFilePath, UpLoadDate)
                                            VALUES (@User, @FileName, @FPath, @UpLoadDate)", conn)

                cmdSQL.Parameters.Add("@User", SqlDbType.NVarChar).Value = Session("UserName")
                cmdSQL.Parameters.Add("@FileName", SqlDbType.NVarChar).Value = e.FileName
                cmdSQL.Parameters.Add("@FPath", SqlDbType.NVarChar).Value = strF
                cmdSQL.Parameters.Add("@UpLoadDate", SqlDbType.DateTime).Value = DateTime.Now
                conn.Open()
                cmdSQL.ExecuteNonQuery()
            End Using
        End Using

    End Sub

The result when run is this: