Hi I’m quite new to flask and I want to upload a file using an ajax call to the server. As mentioned in the documentation, I added a file upload to the html as folows:
<form action="" method=post enctype="multipart/form-data" id="testid"> <table> <tr> <td> <label>Upload</label> </td> <td> <input id="upload_content_id" type="file" name="upload_file" multiple> <input type="button" name="btn_uplpad" id="btn_upload_id" class="btn-upload" value="Upload"/> </td> </tr> </table> </form>
and I wrote the ajax handler as this
$(document).ready(function() { $("#btn_upload_id" ).click(function() { $.ajax({ type : "POST", url : "/uploadajax", cache: false, async: false, success : function (data) {}, error: function (XMLHttpRequest, textStatus, errorThrown) {} }); }); });
I do not know how to get the uploaded file (not the name) from this
<input id="upload_content_id" type="file" name="upload_file" multiple>
and save the file in folder. I’m not quite sure how to read the file from handler which i have written:
@app.route('/uploadajax', methods = ['POST']) def upldfile(): if request.method == 'POST': file_val = request.files['file']
I will be grateful if anyone can help. Thank you in advance
Advertisement
Answer
To answer your question…
HTML:
<form id="upload-file" method="post" enctype="multipart/form-data"> <fieldset> <label for="file">Select a file</label> <input name="file" type="file"> </fieldset> <fieldset> <button id="upload-file-btn" type="button">Upload</button> </fieldset> </form>
JavaScript:
$(function() { $('#upload-file-btn').click(function() { var form_data = new FormData($('#upload-file')[0]); $.ajax({ type: 'POST', url: '/uploadajax', data: form_data, contentType: false, cache: false, processData: false, success: function(data) { console.log('Success!'); }, }); }); });
Now in your flask’s endpoint view function, you can access the file’s data via flask.request.files.
On a side note, forms are not tabular data, therefore they do not belong in a table. Instead, you should resort to an unordered list, or a definition list.