I have a small django application: the user uploads a file, the file is modified on the server side and the modified file is sent back to the user as a download. In order to provide a nice drag-and-drop file upload form I use dropzone.js. The form contains other input elements, so I followed this howto. After the form is submitted, the django view returns a HttpResponse object:

response = HttpResponse(f.read(), content_type="application/pdf")
response['Content-Disposition'] = 'attachment; filename="%s"' % input_file

My problem is: if I use the dropzone-based form, the response isn't shown, i.e., the browser does not show a download dialog.

Here is the minimal example of my html file:

<form method="post" class="dropzone" action="/mysite/" enctype="multipart/form-data" id="myForm">
    {% csrf_token %}
    <select name="selectpdf" size="1">
    // filled by django magic
    </select>
    <p><button type="submit">Do it!</button></p>
 </form>

<script type="text/javascript">
    Dropzone.options.myForm = {
        // Prevents Dropzone from uploading dropped files immediately
        autoProcessQueue : false,
        forceFallback : false,

        init : function() {
            myDropzone = this;

            this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
                // Make sure that the form isn't actually being sent.
                e.preventDefault();
                e.stopPropagation();
                myDropzone.processQueue();
            });
        }
    };
</script>

When I use a regular HTML form (i.e., without the class="dropzone" and using a standard file upload field), everything works perfectly. Also, if I activate dropzones fallback mode (which basically does the same), everything is fine. Thus, I assume the problem is not related to the django part.

After pressing the submit-button, I observe that the myDropzone.processQueue(); is correctly executed (because the file is uploaded) and the uploaded file is correctly handled on the server side (i.e., the file is modified and the appropriate HttpResponse is generated and returned). However, the client never sees it. Also I observed, that the form seems to be in some wrong state, because if I hit the submit-button again, nothing happens.

To me it looks like there's some JavaScript based client-side final redirection missing, that's done implicitly when using the plain HTML method.

According to the howto, I can catch certain events such as

this.on("success", function(files, response) { ... }

in order to redirect the user. But in fact I don't want to redirect him, I want the same behavior as with the plain HTML method (i.e., stay on the site, have the form filled, have the download provided and being able to hit the submit button again).

Can someone help?