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 .