How to send data to the view in Flask using AJAX?

Question

Please help...

I am trying to upload a csv or excel file, and using an Ajax call trying to send it to Flask along with an integer.

HTML Form:

<form id="testFileForm" method="POST" action="{{ url_for('auto') }}" enctype="multipart/form-data">
    {{ fileUploadForm.csrf_token }}
    <label class="connect choosefile setInput config-button-size " >
        <i class="fa fa-file" aria-hidden="true"></i>
        &nbsp; <span id="testFileLabel">Choose Test Data</span>
        {{ fileUploadForm.file(class="input1 btn btn-primary", id="testFile") }}

    </label>

    <label class="form-label" style="padding-left:10px ;">
        <input class="btn btn-primary config-button-size" id="testFilebtn" type="submit" value="Process">
    </label>
</form>

Ajax Call:

$('#testFilebtn').click(function() {
                    
    var file = document.getElementById("testFile").files[0];
    alert(file)
    var data = {
      file: file,
      id : 1
    }
    alert('file loaded')
    $.ajax({
        data: data,
        type: "POST",
        url: "auto",
        "Content-Type": 'application/json',
        dataType: 'json',

        success: function(response) {
          alert(response)
        },
    });
  });

View:

@app.route('/auto', methods=['POST', 'GET'])
@login_required
def auto(dataset_id=None):

    fileUploadForm = FileUploadForm()

    if request.method=='POST' and fileUploadForm.validate_on_submit():
        try:
            file = request.files['file']

            id = request.form['id']
            print('id')
            print(id)

        except UploadNotAllowed:
            return redirect(url_for("auto"))
        # return redirect(url_for("auto"))
        return "te"

I get error while retrieving the id, which indicates I am also not receiving file from ajax call. Error:

werkzeug.exceptions.BadRequestKeyError: 400 Bad Request: The browser (or proxy) sent a request that this server could not understand.
KeyError: 'id'

I am new to Ajax calls, some help would highly be appreciated...

Answer 1

I believe you could do it like this :

var fd = new FormData($('#testFileForm')[0]);    
fd.append( 'id', 1 );
$.ajax({
  url: 'http://example.com/',
  data: fd,
  processData: false,
  contentType: false,
  type: 'POST',
  success: function(data){
    alert(data);
  }
});

Notes:

Setting processData to false lets you prevent jQuery from automatically transforming the data into a query string. See the docs for more info. Setting the contentType to false is imperative, since otherwise jQuery will set it incorrectly.