How can I show file upload progress in Flask?

How can I show file upload progress in Flask?

You can use JavaScript with AJAX to track the progress of file uploads in Flask. Would you like a code example?

Yes, please provide a code example.

Here's a simple example using Flask and jQuery:

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/upload', methods=['POST'])
def upload_file():
    file = request.files['file']
    file.save(f'uploads/{file.filename}')
    return jsonify({'message': 'File uploaded successfully!'}), 200

if __name__ == '__main__':
    app.run(debug=True)

And for the front-end:

<form id='upload-form'>
    <input type='file' name='file' />
    <button type='submit'>Upload</button>
</form>
<div id='progress'></div>
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
<script>
$('#upload-form').on('submit', function(e) {
    e.preventDefault();
    var formData = new FormData(this);
    $.ajax({
        xhr: function() {
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener('progress', function(evt) {
                if (evt.lengthComputable) {
                    var percentComplete = evt.loaded / evt.total;
                    $('#progress').text(Math.round(percentComplete * 100) + '% uploaded');
                }
            }, false);
            return xhr;
        },
        url: '/upload',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(data) {
            $('#progress').text(data.message);
        }
    });
});
</script>

What if I want to show a loading spinner during the upload?

You can add a loading spinner by showing it when the upload starts and hiding it when the upload completes. Would you like to see how to implement that?