Kalanamith Kalanamith - 2 months ago 46
Python Question

How to upload a file using an ajax call in flask

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

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,
            async: 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.