javascript - Dropzone.js not sending the file when adding additional data

Question

I'm trying to integrate dropzone.js into a bigger form and send the entire form along with the upload file. But I only receive the additional data on my upload endpoint, not the file that I uploaded with dropzone.js.

This is my html form

            <form enctype="multipart/form-data" method="POST">
                <div class="dropzone mb-2" id="myDropzone" style="width: 400px;">
                    <div class="dz-message needsclick">
                        <button type="button" class="dz-button">
                            Drop files here or click to upload.
                        </button>
                    </div>
                </div>
                <div>
                    <button type="button" class="button" onclick="toggleOptions()">
                        Show options
                    </button>
                    <button type="submit" id="submit-all" class="button is-primary">
                        Upload
                    </button>
                </div>
                <div id="options" class="container is-hidden">
                    <div class="box mt-3">
                        <div class="field">
                            <div class="control">
                                <label class="checkbox">
                                    <input type="checkbox" id="additional-data">
                                    check me or don't
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

And this is my dropzone config

window.onload = function() {
  $("#myDropzone").dropzone({
    url: 'upload',
    maxFilesize: 2000,
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 100,
    maxFiles: 100,
    createImageThumbnails: false,
    init: function() {
        dzClosure = this;

        // for Dropzone to process the queue (instead of default form behavior):
        document.getElementById("submit-all").addEventListener("click", function(e) {
            e.preventDefault();
            e.stopPropagation();
            dzClosure.processQueue();
        });

        //send all the form data along with the files:
        this.on("sendingmultiple", function(file, xhr, form) {
            form.append("data", jQuery("#additional-data").val());
        });
        this.on('error', function(files, response) {
          alert(response);
        });
    }
  })
}

Upon pressing the upload button, the form is being send to the /upload endpoint, but the form only contains the checkbox "data" parameter, there is no file being send. I don't get any errors in the javascript console and inside the dropzone the upload seems to complete just fine.

My backend receiving the form, looks as follows:

@upload.route('/upload', methods=["POST"])
@login_required
def upload_endpoint():
    print("upload endpoint has been hit")
    print(request.form)
    uploaded_file = request.form.get('file')
    print(uploaded_file)
    return redirect(url_for('upload.main_screen')

and from my 3 print statements here I get:

upload endpoint has been hit
ImmutableMultiDict([('data', 'on')])
None

So I'm wondering, why is the file not being transmitted? And what do I have to change for it to be transmitted?

Answer 1

The answer was suprisingly simple:

I had to access the file with request.files instead of request.form on my backend.