CODEWITHSUNDEEP
phphtmljqueryajaxflask
Solat
Solat

Reputation: 303

Problem in pass form and file data with ajax and jQuery

I want to pass some form data and file to a flask application from a form. but I can't pass it with ajax. There is a problem in data I guess. I've send data in ajax but in flask application I don't get any string or files.

Here is my html code:


<form id="user_vote" enctype = "multipart/form-data">
        <br>
        <br>
        <div class="row">
            <label class="col-sm-2">Name:</label>
            <div class="col-sm-10">
                <input type="text" name="name" id="name" rows="2" class="form-control" required>
            </div>
        </div>

        <div class="row">
            <label class="col-sm-2">National ID Image:</label>
            <div class="col-sm-10">
                <input type="file" name="national_id_image" id="national_id_image" rows="2" class="form-control" required>
            </div>
        </div>
        <br>

        <div class="row">
            <label class="col-sm-2">Vote:</label>
            <div class="col-sm-10">
                <input type="number" name="vote" id="vote" rows="2" class="form-control" required>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12 text-center">
                <input type="button" id="submit_vote" class="btn btn-primary btn-lg"
                       value="Authenticate and Encrypt Vote">
            </div>
        </div>

And here is my ajax code::



      $(function(){

        var form = $('#user_vote')[0];
        var data = new FormData(form);

        //console.log('hello');
        //console.log(document.getElementById('submit_vote'));

        $('#submit_vote').click(function(){
          //console.log(data);
          //console.log('hello');

          $.ajax({
            url: '/encrypt/vote',
            type: "POST",
            dataType: 'json',
            enctype: 'multipart/form-data',
            data: data,
            contentType: false,
            cache: false,
            processData:false,
            success: function(response){
              //console.log("SUCCESS : ", data);
              document.getElementById("encrypted_vote").innerHTML = response['encrypted_vote'];
              document.getElementById("public_key").innerHTML = response['signature'];
              document.getElementById("warning").style.display = "block";
            },
            error: function(error){
              console.log(error);
            }
          });
        });
      })

Flask codes::

app.route('/encrypt/vote', methods=['POST'])
def encrypt_vote():
    print('test')
    name = request.form['name']
    print(name)
    family_name = request.form['family_name']
    birth_date = request.form['birth_date']
    national_id = request.form['national_id']
    file = request.files['national_id_image']
    filename = str(name) + str(family_name)# + secure_filename(file.filename)
    #file.save(os.path.join(app.root_path, UPLOAD_FOLDER, filename))
    #voter_national_cart_hash = get_digest('files/uploads/' + filename)

    print('test vote type')
    print(request.form['vote'])
    vote = int(float(request.form['vote']))

    pk = int(float(request.form['public_key']))


    encrypted_vote = encrypt(pk, vote)

    response = {
        'encrypted_vote': str(encrypted_vote)
    }

    return jsonify(response), 200

Anyone can help me?? Thanks

Upvotes: 0

Views: 52

Answers (1)

Bud Damyanov
Bud Damyanov

Reputation: 31919

It seems that you set enctype: 'multipart/form-data', which is non-existent property of the $.ajax() method. You should correct this error and simplify the request:

$.ajax({
    type: "POST",
    data: data,
    url: '/encrypt/vote',           
    cache: false,
    contentType: false,
    processData: false,
    success: function(response) {
        /*The rest of your code*/
    },
    error: function(error){
         console.log(error);
    }
});

There is no need to set dataType, the default is Intelligent Guess (xml, json, script, or html). Read more here.

EDIT: Make sure you are using correct full path in the url, try not to use relative address, use https://www.your-server.com/encrypt/vote instead.

Upvotes: 1

Related Questions