Post file and data. AJAX - FLASK

1

My doubt arises as a result of wanting to send a file with data (everything from a form ) to flask to be stored in a directory.

This, I could achieve it in a "separate" way. I wanted to know if there was any way to nest these solutions so that it does so in a single AJAX call. The idea would be that at my upldfile() of flask the image and these parameters arrive to perform a treatment with PILLOW

I leave the resolution to upload the file:

Flask

@app.route('/uploadajax', methods=['POST'])
def upldfile():
if request.method == 'POST':
    files = request.files['file']
    if files and allowed_file(files.filename):
        filename = secure_filename(files.filename)
        app.logger.info('FileName: ' + filename)
        updir = os.path.join(basedir, 'upload/')
        files.save(os.path.join(updir, filename))
        file_size = os.path.getsize(os.path.join(updir, filename))
        #return jsonify(name=filename, size=file_size)
        return jsonify(path=os.path.join(updir, filename))

HTML

<form id="uploadform" method="post" enctype="multipart/form-data">
 <table>
    <tr>
        <td><label for="file">Selecciona tu imagen</label></td>
        <td colspan="2"><input name="file" type="file"></td>
    </tr>
    <tr>
        <td>Filtros:</td>
        <td><input name="saturacion" type="number" min="0" max="100" step="1" placeholder="Saturacion"></td>
        <td><input name="contraste" type="number" min="0" max="100" step="1" placeholder="Contraste"></td>
    </tr>

JS

$(function() {
$('#submit').click(function() {
    event.preventDefault();
    var form_data = new FormData($('#uploadform')[0]);
    $.ajax({
        type: 'POST',
        url: '/uploadajax',
        data: form_data,
        contentType: false,
        processData: false,
        dataType: 'json'
    }).done(function(data, textStatus, jqXHR){
        console.log(data);
        console.log(textStatus);
        console.log(jqXHR);
        console.log('Success!');
        $("#result_path").text(data['path']);
    }).fail(function(data){
        alert('error!');
    });
});

I leave the resolution to increase the saturation and contrast parameters:

JS

$(document).ready(function(){

$('form').submit(function(event){

    var formData = {
        'file' : $('#file')[0].files[0],
        'saturacion' : $('input[name=saturacion]').val(),
        'contraste' : $('input[name=contraste]').val(),
        'brillo' : $('input[name=brillo]').val(),
        '100x80' : $('input[name=chx_100x80]').val(),
        '225x180' : $('input[name=chx_225x180]').val(),
        '500x400' : $('input[name=chx_500x400]').val(),
        '1200x960' : $('input[name=chx_1200x960]').val(),
        'calidad' : $('input[name=calidad]').val()

    };
    $.ajax({
        type : 'POST',
        url : '/uploadajax',
        data : formData,
        dataType: 'json',
        encode : true
    })
        .done(function(data){
            console.log(data);
        });
       event.preventDefault();
});

My question is:

How to pass with AJAX the data (saturation and contrast) and the file, and in turn, save them in a variable in flask .

    
asked by Agu Aguilar 22.10.2016 в 17:48
source

0 answers