Flask flash message wont show

Question

I have a web application with flask in which I can upload a file to an s3 storage. However, I want the users to track the upload progress of their files. For this, I'm using flash which I want to update frequently with the new upload percentage. The problem now is that the upload progress I wrote to the terminal is perfect, but the message won't appear in my HTML. The Python Flask code looks like this:

class ProgressPercentage(object):

    def __init__(self, filename):
        self._filename = filename
        self._size = float(os.path.getsize(filename))
        self._seen_so_far = 0
        self._lock = threading.Lock()
        print(f'Ground_Filename: {filename}; Size: {self._size}; Filename: {self._filename}; Seen: {self._seen_so_far}')


    def __call__(self, bytes_amount):
        with app.test_request_context():
            with self._lock:
                self._seen_so_far += bytes_amount
                percentage = (self._seen_so_far / self._size) * 100
                sys.stdout.write(
                    "\r%s  %s / %s  (%.2f%%)" % (
                        self._filename, self._seen_so_far, self._size,
                        percentage))
                flash(rf"""<li class="row">
                            <i class="fas fa-file-alt"></i>
                            <div class="content">
                                <div class="details">
                                <span class="name">{{ self.filename }} • Uploading</span>
                                <span class="percent">{{ percentage }}%</span>
                                </div>
                                <div class="progress-bar">
                                <div class="progress" style="width: {{ percentage }}"></div>
                                </div>
                            </div>
                            </li>""")
            sys.stdout.flush()



@app.route('/dashboard', methods=['POST'])
@login_required
def dashboard_post():
    s3_client = boto3.client('s3', 
                            aws_access_key_id=AWS_KEY, 
                            aws_secret_access_key=AWS_SECRET_KEY)

    file = request.files['input_file']

    if file:
        filename = secure_filename(file.filename)
        file.save(filename)
        s3_client.upload_file(
            Bucket='deepstream-input',
            Filename=filename,
            Key=filename,
            Callback=ProgressPercentage(filename))

And this is the HTML:

    <form method="POST" enctype="multipart/form-data">
      <label class="custom-file-upload">
        <br><br>
        <i class="fas fa-cloud-upload-alt"></i>
        <input id="file-upload" type="file" name="input_file" accept="video/*" onchange="form.submit()"/>
        <p>Zu verfremdende Datei auswählen</p>
      </label>
    </form>
    <section class="progress-area">
      {% with messages = get_flashed_messages() %}
        {% if messages %}
          {{ messages[0] }}
      {% endif %}
      {% endwith %}
    </section>

Does someone have an idea where the problem is? And if there is a problem with my question please tell me so I can edit it.

Answer 1

I seems that you sending html in the flash message you should add safe to jinja

{% with messages = get_flashed_messages() %}
    {% if messages %}
        {{ messages[0]|safe }}
    {% endif %}
{% endwith %}

I hope this helps.