0

I'm working on a flask app, and to change the profile picture I have two buttons, one for selecting the image from your files, and another to literally refresh the whole template in order to see the changes. I would like to know is there is another way to do this but when the user selects the file, the profile picture immediately changes without having to render the whole page.

This is how I'm doing it right now:

if request.method == "POST" and "photo" in request.files:
        photo = request.form.get("photo")
        user_id = session["user_id"]
        filename = photos.save(request.files['photo'])
        row = User.query.filter_by(user_id = user_id).first()
        row.img_url = filename
        updated_filename = row.img_url
        db.session.commit()

An this is my html:

<form action="{{ url_for('profile') }}" method="post" enctype=multipart/form-data>
<p class="text-center text-muted">Aquí vas a poder editar tu información. Una vez que estes listo, presionas en "Ver" y aparecerá como se verá tu perfil cuando otras personas lo escaneen! </p>
{% if genre %}
  <center><div class="circular"><img border="1" style="width:30%; object-fit: contain" class="rounded-circle" src="static/img/{{updated_filename}}"></div></center>
<br>
  • 1
    Have you tried using javascript to change the image? – noslenkwah May 11 '20 at 22:50
  • I have a very limited knowledge about javascript, but I would be open to use it. Three months ago I didn`t know anything about programming, so I'm just a beginner. How would you implement it with javascript? –  May 11 '20 at 22:53
  • In short you need to [reload](https://stackoverflow.com/questions/9883518/dynamic-img-refresh-with-javascript) your image [after](https://stackoverflow.com/questions/12483016/executing-javascript-after-a-form-finishes-submitting) your form submits. – noslenkwah May 11 '20 at 23:07

0 Answers0