Sending data asynchronously from Flask to Front-end

Question

I have a DNA scanning tool. I want to send and receive data asynchronously. After every action in Flask, I want to send data to the front-end which will tell the user what is happening.

Here is my code:
FLASK:

 @app.route('/upload', methods = ['GET','POST'])
    def upload():
        if request.method == "POST":
            uploaded_file = request.files['fasta_file']
            uploaded_file.filename = str(uuid.uuid4()) + ".fasta"
            file_name = uploaded_file.filename
            if file_name != '':
                file_ext = os.path.splitext(file_name)[1]
                if file_ext not in app.config['UPLOAD_EXTENSIONS']:
                    return redirect(url_for('uploader'))
                else:
                    print("Uploading")
                    uploaded_file.save(os.path.join(app.config['UPLOAD_PATH'], file_name))
                    print("Uploaded")
                    print("Scanning")
                    os.system(f"python3 DNAScanner.py instance/uploads/{file_name}%2%3")
                    print("Scanned")
                    new_folder = pickle.load(open("store.p","rb"))
                    print("Making ZIP FILE")
                    shutil.make_archive(f"static/output/{new_folder}", 'zip', f"static/output/{new_folder}")
                    print("Done")

JS:

$('#submit').click(function() {
    var form_data = new FormData($('form')[0]);
    $.ajax({
        type: 'POST',
        url: '/upload',
        data: form_data,
        contentType: false,
        cache: false,
        processData: false,
        success: function(data) {
            console.log(data);
        },
    });
});

So, whatever I am printing in the flask using print function, I want to show it to the user on the front end.

Asked By: Azeen Riyaz

||

Source

Answer 1

I would suggest using Flask-SocketIO and pipe your print statements into a socket.

pip install flask-socketio

from flask_socketio import SocketIO, emit
from flask import Flask, request, render_template
from uuid import uuid4
import os

@app.route('/upload', methods = ['GET','POST'])
def upload():
    if request.method == "POST":
        uploaded_file = request.files['fasta_file']
        uploaded_file.filename = str(uuid.uuid4()) + ".fasta"
        file_name = uploaded_file.filename
        if file_name != '':
            file_ext = os.path.splitext(file_name)[1]
            if file_ext not in app.config['UPLOAD_EXTENSIONS']:
                return redirect(url_for('uploader'))
            else:
                socketio.emit('uploadstatus',{"uploadlogger": "Uploading"})
                uploaded_file.save(os.path.join(app.config['UPLOAD_PATH'], file_name))
                socketio.emit('uploadstatus',{"uploadlogger": "Uploaded"})
                socketio.emit('uploadstatus',{"uploadlogger": "Scanning"})
                os.system(f"python3 DNAScanner.py instance/uploads/{file_name}%2%3")
                socketio.emit('uploadstatus',{"uploadlogger": "Scanned"})
                new_folder = pickle.load(open("store.p","rb"))
                socketio.emit('uploadstatus',{"uploadlogger": "Making ZIP FILE"})
                shutil.make_archive(f"static/output/{new_folder}", 'zip', f"static/output/{new_folder}")
                socketio.emit('uploadstatus',{"uploadlogger": "Done"})

in your front end html put:

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js" integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA==" crossorigin="anonymous"></script>

in your front end js put:

var socket = io();
socket.on('uploadstatus', function(msg) {
        console.log(msg.uploadlogger)
        }
    )

Link on where I got my info from – https://flask-socketio.readthedocs.io/en/latest/getting_started.html

TIPS: When installing Socketio for flask, make sure your flask-socketio and the client version you add to your html are the same. – https://stackoverflow.com/a/52883703/18192997

Answered By: PythonKiddieScripterX

Sending data asynchronously from Flask to Front-end

Question:

Answers: