CODEWITHSUNDEEP
htmlpython-3.xwebflask
Sahar Metwally
Sahar Metwally

Reputation: 79

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

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>

Upvotes: 1

Views: 3919

Answers (1)

Ben Durham
Ben Durham

Reputation: 92

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

Upvotes: 1

Related Questions