Sending data asynchronously from Flask to Front-end

Viewed 56

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.

0 Answers
Related