How to send a string from python to HTML element using Flask

Question

How to send a sting text data from a python script to a specific HTML element. So that I can display it to users clearly and in a certain place using Flask Python library.

python script

@app.route('/services', methods=['POST', 'GET'])
def upload_image():
    if 'file' not in request.files:
        flash('No file part')
        return redirect(request.url)

    file = request.files['file']
    if file.filename == '':
        flash('No image selected for uploading')
        return redirect(request.url)
    if file and allowed_file(file.filename):
        filename = secure_filename(file.filename)
        full_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
        file.save(full_path)
        # print('upload_image filename: ' + filename)
        flash('Image successfully uploaded and displayed')

        get_image(file.filename)
        get_image_path()
        data = 'render some text sting here' 
        print(data)

        return render_template('services.html', filename=filename, dataToRender=data)
    else:
        flash('Allowed image types are -> png, jpg, jpeg, gif')
        return redirect(request.url)

HTML

<form method="post" action="{{ url_for('upload_image') }}" enctype="multipart/form-data">
     <label for="img" style="margin-bottom: 40px;font-size: 30px">choose image:</label>

     <input type="file" onchange="preview(event)" autocomplete="off" required name="file"><br>
     <img class="card-img-top" src="img/inttion.jpg" id="imgg" alt="Card image cap">
     <p>
         <input type="submit" value="Submit">
         <h3>Your Recognition Result IS</h3>
         <input type="text" name="result">
          <h1>here is the result {{ dataToRender }}</h1>
     </p>
</form>

Ben Durham · Accepted Answer · 2020-07-26 02:59:07Z

1

To do what you are asking, you will have to make use of flask's ability to integrate with a templating engine (flask uses Jinja2 by default). This would look something like this:

In your main file with your routes in it, you will have to define a route on which you want to render a template

from flask import render_template

@app.route('/')
def index():
    data = someFunction()
    return render_template('index.html', dataToRender=data)

In another file called templates/index.html you will have to define the template and this is where you can dictate where the information that you provided will show up.

<!DOCTYPE html>
<title>Hello from Flask</title>
<h1>Hello {{ dataToRender }}!</h1>

I hope this helps. Flask also has some great documentation on the subject that can be found here

answered Jul 26, 2020 at 2:59

Ben Durham

921 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sahar Metwally Over a year ago

It does not display anything

Ben Durham Over a year ago

Can you give more information about what you are trying to do?

Sahar Metwally Over a year ago

I edited the post with some code please take a look. I am trying to take an image from user then display some string text depending on type on this image. I got the image correctly but whenever I trying to render text nothing appear at all.

Gustavo Rodríguez Over a year ago

The problem here is that flask/Jinja2 assumes input inside of {{ }} is unsafe you must add the "safe" keyword {{ dataToRender | safe }}. This fixes the problem reported by OP.

Collectives™ on Stack Overflow

How to send a string from python to HTML element using Flask

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related