带有表单输入的Dropzone.js

Question

Here's my problem : I want to add input when the user add a file, but when I send the file nothing happen, it's look like I call the wrong function. here is my html/js (it's a django template btw) code :

<form id="myDropzone" action="{% url 'import' %}" method="POST" class="dropzone text-center"> <div id="form_import_div"> </div> <div class="fallback"> </div></form>

and here the dropzone option code :

 <script type="text/javascript">
       // using jQuery
            function getCookie(name) {
                var cookieValue = null;
                if (document.cookie && document.cookie !== '') {
                    var cookies = document.cookie.split(';');
                    for (var i = 0; i < cookies.length; i++) {
                        var cookie = jQuery.trim(cookies[i]);
                        // Does this cookie string begin with the name we want?
                        if (cookie.substring(0, name.length + 1) === (name + '=')) {
                            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                            break;
                        }
                    }
                }
                return cookieValue;
            }
            var csrftoken = getCookie('csrftoken');
            ask_job_type(csrftoken);
           $("#myDropzone").dropzone({
            url:"{% url 'dashboard/import' %}",
            maxFilesize: 5000,
            addRemoveLinks : true,
            dictDefaultMessage: "Drop your log files here or click to upload",
            dictResponseError: 'Error uploading file!',
            autoQueue:false,
            autoProcessQueue:false,
            maxFiles: 1,
            headers: {
                'X-CSRFToken': csrftoken
            },
            init : function() {
                var myDropzone = this;
                $("#btn_upload").click(function (e) {
                    e.preventDefault();
                    myDropzone.processQueue();
                });

                this.on('sending', function(file, xhr, formData) {
                    var data = $('#myDropzone').serializeArray();
                    $.each(data, function(key, el) {
                        formData.append(el.name, el.value);
                    });
                });
                this.on("successmultiple", function(files, response) {
                  alert("success");
                  alert(response);
                });
                this.on("success", function(files, response) {
                  alert("success");
                  alert(response);
                });
                this.on("errormultiple", function(files, response) {
                    console.log(response);
                });

            },
            success: function (file, response) {
                location.reload();
                this.removeFile(file); //todo discuter de quoi faire
            }

        });
</script>

note : ask_job_type() is just a call to js DOM document function which add all input element. my button to submit have the id "btn_upload"

I don't know what to do and i've seen tutorial like this one : https://gitlab.com/meno/dropzone/wikis/upload-all-files-with-a-button but nothing work

Answer 1

Add these scripts firstly
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
//then for dropdown 
<script>
$(document).ready(function(){
    $(".dropdown-toggle").dropdown();
});
</script>