Dropzone JS not working after update panel postback

Question

I'm trying to use Dropzone JS to add an upload functionality to an usercontrol, who show a modal popup with two tabs, Dropzone JS is in the second tabs. there are a few updatepanels and when the parent updatepanels does postback, Dropzone JS doesn't work .

This is the usercontrol:

<asp:Panel runat="server" ID="mpto_MainPanel" Class="modal fade" Style="display: none;">
<asp:Panel runat="server" ID="Panel9">
    <asp:UpdatePanel runat="server" class="modal-dialog" ID="SecondaryUP" UpdateMode="Conditional" ChildrenAsTriggers="false" >
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="mpto_btn_conferma" EventName="click"/>
        </Triggers>
        <ContentTemplate>

            <div class="modal-content" style="width: 600px;">
                <asp:Panel runat="server" class="modal-header">
                    <asp:UpdatePanel runat="server">
                        <ContentTemplate>
                            <h4 class="modal-title"><%= pTitolo %></h4>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </asp:Panel>

                <div class="modal-body" style="height: 700px;">

                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#Tab_Mail" aria-controls="Tab_Mail" role="tab" data-toggle="tab">Email</a></li>
                        <li role="presentation"><a href="#Tab_Allegati" aria-controls="Tab_Allegati" role="tab" data-toggle="tab">Allegati</a></li>
                    </ul>


                    <!-- Tab panes -->
                    <div class="tab-content">
                        <%-- TAB PRINCIPALE --%>
                        <div role="tabpanel" class="tab-pane active" id="Tab_Mail" style="height: 344px;">

                            <div class="mpto_RigaForm" style="height: 140px; margin-top: 10px;">
                                <div style="height: 100px; width: 100px; float: left;">
                                    <asp:Image runat="server" ID="mpto_popup_icon" Style="height: 100px; width: 100px;" />
                                </div>
                                <div style="height: 150px; width: 440px; float: left; margin-left: 20px; display: table-cell; vertical-align: middle;">
                                    <div class="mpto_RigaForm">
                                        <div class="mpto_LabelFormSx_1">
                                            A
                                        </div>
                                        <div style="width: 400px; display: inline-block; float: left;">
                                            <asp:DropDownList ID="DropDownCampoTo" runat="server" class="form-control" Style="max-width: 900px; width: 400px;"></asp:DropDownList>
                                        </div>
                                    </div>
                                    <div class="mpto_RigaForm" style="height: 35px;">
                                        <div class="mpto_LabelFormSx_1">
                                            C.C.
                                        </div>
                                        <div style="width: 400px; display: inline-block; float: left;">
                                            <asp:TextBox runat="server" type="text" class="form-control" ID="TXT_DESTINATARIO_CC_1" placeholder="Destinatario in copia" Style="max-width: 900px; width: 400px;"></asp:TextBox>
                                        </div>
                                    </div>
                                    <div class="mpto_RigaForm" style="height: 35px;">
                                        <div class="mpto_LabelFormSx_1">
                                            C.C.
                                        </div>
                                        <div style="width: 400px; display: inline-block; float: left;">
                                            <asp:TextBox runat="server" type="text" class="form-control" ID="TXT_DESTINATARIO_CC_2" placeholder="Destinatario in copia" Style="max-width: 900px; width: 400px;"></asp:TextBox>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="mpto_RigaForm" style="height: 34px;">
                                <div class="mpto_LabelFormSx_2">
                                    Oggetto
                                </div>
                                <div style="width: 480px; display: inline-block; float: left;">
                                    <asp:TextBox runat="server" type="text" class="form-control" ID="TXT_OGGETTO" placeholder="Oggetto (Obbligatorio)" Style="max-width: 900px; width: 480px;"></asp:TextBox>
                                </div>
                            </div>
                            <div class="mpto_RigaForm" style="height: 150px;">
                                <div class="mpto_LabelFormSx_2">
                                    Corpo
                                </div>
                                <div style="width: 480px; display: inline-block; float: left;">
                                    <asp:TextBox runat="server" type="text" class="form-control" ID="TXT_CORPO" TextMode="MultiLine" placeholder="Corpo della mail (Obbligatorio)" Style="max-width: 900px; max-height: 900px; width: 480px; height: 150px;"></asp:TextBox>
                                </div>
                            </div>
                        </div>
                        <%-- TAB ALLEGATI --%>
                        <div role="tabpanel" class="tab-pane" id="Tab_Allegati" style="height: 344px;">
                            <div class="mpto_RigaForm" style="height: 120px; margin-top: 10px;">
                                <div style="height: 100px; width: 100px; float: left;">
                                    <asp:Image runat="server" ID="mpto_popup_icon2" Style="height: 100px; width: 100px;" />
                                </div>
                                <div style="height: 100px; width: 440px; float: left; margin-left: 20px; display: table-cell; vertical-align: middle;">
                                    <div class="mpto_RigaForm">
                                        <br />
                                        <br />
                                        Qui è possibile aggiungere eventuali allegati alla mail.<br />
                                        <strong>Ti ricordo che l'offerta viene allegata automaticamente!</strong>
                                    </div>
                                </div>
                            </div>


                            <div class="mpto_RigaForm" style="height: 45px;">
                                <div class="mpto_LabelFormSx_2">
                                    Allegati
                                </div>
                                <div style="width: 450px; display: inline-block; float: left; height: 300px;">
                                    <asp:UpdatePanel UpdateMode="Conditional" ChildrenAsTriggers="true"  runat="server" ID="UpdatePanel1" style="width: 450px; display: inline-block; float: left; height: 300px;">
                                        <ContentTemplate>
                                            <div id="my-awesome-dropzone" class="dropzone">
                                                <div class="fallback">
                                                    <input name="file" type="file" multiple="multiple" runat="server" />
                                                    <input name="btnUpload" type="submit" /><br />
                                                    <br />
                                                    <asp:Label ID="lblFallbackMessage" runat="server" />
                                                </div>
                                            </div>

                                            <div style="height: 40px; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px;">
                                                <br />
                                                Elenco files appena caricati:


                                            </div>

                                            <div id="foo" style="height: 270px; overflow-y: auto; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.5em">
                                            </div>

                                            <asp:Button ID="Button2" runat="server"  Text="Button" />

                                        </ContentTemplate>
                                        <Triggers>
                                            <asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
                                        </Triggers>
                                    </asp:UpdatePanel>
                                </div>
                            </div>

                            <div class="mpto_RigaForm" style="height: 150px;">
                                <asp:TextBox runat="server" ID="TXT_ELENCO_FILES" Style="display: non;"></asp:TextBox>
                                <input id="Button1" type="button" value="Cancella lista Allegati" class="btn btn-default" style="margin-top: 10px; margin-left: 80px;" onclick="CancellaLista();" />
                            </div>


                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <asp:Label runat="server" ID="mpto_LabelMsg" Text="" Width="300px" Style="text-align: left;"></asp:Label>
                    <asp:Button runat="server" ID="mpto_btn_conferma" type="button" Text="Conferma" CssClass="btn btn-success" />
                    <asp:Button runat="server" ID="mpto_btn_annulla" type="button" Text="Annulla" CssClass="btn btn-default" />
                </div>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Panel>

<uc1:MyPopup runat="server" ID="MyPopup" />

this is the javascript code that open/close modal and setup Dropzone JS:

<script type="text/javascript">
function openModal_popup_trasmettiofferta() {
    $('#<%= mpto_MainPanel.ClientID%>').modal({
        keyboard: true,
        show: true,
        backdrop: 'static'
    })
};

function closeModal_popup_trasmettiofferta() {
    $('#<%= mpto_MainPanel.ClientID%>').modal('hide');
    $('.modal-backdrop').remove();
};


$('#<%= mpto_MainPanel.ClientID%>').on('shown.bs.modal', function () {
    $('#<%= DropDownCampoTo.ClientID%>').focus();
});



function AggiungiFileAllaLista(filename) {
    var ActTest = document.getElementById('<%= TXT_ELENCO_FILES.ClientID%>').value;

    if (ActTest != "") {
        document.getElementById('<%= TXT_ELENCO_FILES.ClientID%>').value = ActTest + ';' + filename;
    }
    else {
        document.getElementById('<%= TXT_ELENCO_FILES.ClientID%>').value = ActTest + filename;
    }

    // clear file
    var fileInputElement = sender.get_inputFile();
    fileInputElement.value = "";

}


function CancellaLista() {
    document.getElementById('<%= TXT_ELENCO_FILES.ClientID%>').value = "";
}




var divok = "<div style='display:block; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size:14px; color:green;'>"
var divnok = "<div style='display:block; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size:14px; color:red;'>"
var closediv = "</div>"

test();

//$(document).ready(function () {
function test() {

    Dropzone.options.myAwesomeDropzone = {
        maxFilesize: 20,
        maxFiles: 1,
        url: "../Controlli/PopupTrasmettiOfferta/Handler.ashx?path=StoredFiles/Temp",
        addRemoveLinks: true,
        dictResponseError: 'Server not Configured',
        dictFileTooBig: "Il file che stai cercando di caricare è di {{filesize}}MB mentre la dimensione massima accettabile è {{maxFilesize}}MB",

        createImageThumbnails: false,
        acceptedFiles: "",
        init: function () {

            var self = this;
            // config
            self.options.addRemoveLinks = true;
            self.options.dictRemoveFile = "Cancella";

            //New file added
            self.on("addedfile", function (file) {
                //console.log('new file added ', file);
            });
            // Send file starts
            self.on("sending", function (file) {
                console.log('upload started', file);
                $('.meter').show();
            });

            // File upload Progress
            self.on("totaluploadprogress", function (progress) {
                //console.log("progress ", progress);
                $('.roller').width(progress + '%');
            });

            self.on("queuecomplete", function (progress) {
                $('.meter').delay(999).slideUp(999);
            });

            // On removing file
            self.on("removedfile", function (file) {
                //console.log(file);
            });

            // On success 
            self.on("success", function (file) {
                setTimeout(function () {
                    self.removeAllFiles();
                    AggiungiFileAllaLista(file.name);
                    var a = document.getElementById('foo').innerHTML;
                    document.getElementById('foo').innerHTML = a + divok + ' - ' + file.name + closediv;
                }, 500);
            });

            // On error
            self.on("error", function (file, response) {
                setTimeout(function () {
                    //self.removeAllFiles();
                    //var a = document.getElementById('foo').innerHTML;
                    //document.getElementById('foo').innerHTML = a + divnok + ' - ' + file.name + '</br> (' + response + ')' + closediv;
                }, 500);
            });


        }
    }
    //)

};

and this is the vb code that I use to call show and hide modal and configure his controls:

        DropDownCampoTo.SelectedValue = "Non Specificato"
        mpto_LabelMsg.ForeColor = Drawing.Color.Red
        mpto_LabelMsg.Text = ""
        TXT_DESTINATARIO_CC_1.Text = String.Empty
        TXT_DESTINATARIO_CC_2.Text = String.Empty
        TXT_OGGETTO.Text = String.Empty
        TXT_CORPO.Text = String.Empty

        TXT_ELENCO_FILES.Text = String.Empty
        ' ScriptManager.RegisterStartupScript(Page, Page.GetType(), "RefreshFileList", "AggiornaListaFile();", True)

        pTitolo = "Invia offerta via Email"
        mpto_btn_conferma.Text = "Invia Email"
        mpto_popup_icon.ImageUrl = ResolveUrl("../../imgs/email-icon.png")
        mpto_popup_icon2.ImageUrl = ResolveUrl("../../imgs/clip_icon.png")



        DropDownCampoTo.Items.Clear()
        DropDownCampoTo.Items.Add(New ListItem With {.Text = "Non specificato", .Value = "Non Specificato"})

        Using mydb As New Model_Offerte.DB_Offerte
            Dim result As New List(Of Model_Offerte.OttieniDatiOfferta_Result)

            result = mydb.OttieniDatiOfferta(pIdOfferta).ToList

            Using mydb2 As New DB_Agenda
                Dim result2 As New List(Of OttieniElencoPersonaggiAzienda_Result)
                result2 = mydb2.OttieniElencoPersonaggiAzienda(result.Item(0).ID_AZIENDA).ToList

                Dim Tool As New RegexUtilities
                For Each el In result2
                    If Tool.IsValidEmail(el.EMAIL) Then DropDownCampoTo.Items.Add(New ListItem With {.Text = el.NOME & " " & el.COGNOME & " (" & el.EMAIL & ")", .Value = el.EMAIL})
                    If Tool.IsValidEmail(el.EMAIL2) Then DropDownCampoTo.Items.Add(New ListItem With {.Text = el.NOME & " " & el.COGNOME & " (" & el.EMAIL2 & ")", .Value = el.EMAIL2})
                Next
            End Using
        End Using

        SecondaryUP.Update()

        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "LaunchTasmettiOffertaPopup", "openModal_popup_trasmettiofferta();", True)

If I comment SecondaryUP.Update() and try to show modal popup, Dropzone JS works well until postback of SecondaryUP update panel (by mpto_btn_conferma for example). If I uncomment SecondaryUP.Update() Dropzone JS doesn't work. Can u help me?

this is the result with comment (Dropzone js works but the rest of modal popup is not updated (image missing for example): dropzone js works

this is the result without comment (Dropzone js doesn't works but the rest of modal is correctly updated (image present) dropzone js doesn't works