Update pfp preview on file uplaod

This commit is contained in:
Michał Gdula 2023-06-23 21:58:31 +00:00
parent 193c7d9d07
commit 5307946ce6
6 changed files with 53 additions and 28 deletions

View file

@ -3,6 +3,6 @@
<div class="center-text">
<h2>{{ error }}</h2>
<p>{{ msg }}</p>
<image src="{{ url_for('static', filename='images/error/' + image + '.jpg') }}" alt="Error">
<image src="{{ url_for('static', filename='images/error.png') }}" alt="Error">
</div>
{% endblock %}

View file

@ -8,9 +8,9 @@
<div class="profile-settings">
<div class="picture">
{% if current_user.picture %}
<img src="{{ url_for('api.upload_dir', filename=current_user.picture) }}" alt="Profile picture">
<img src="{{ url_for('api.upload_dir', filename=current_user.picture) }}" alt="Profile picture" id="picture-preview">
{% else %}
<img src="{{ url_for('static', filename='images/pfp.png') }}" alt="Profile picture">
<img src="{{ url_for('static', filename='images/pfp.png') }}" alt="Profile picture" id="picture-preview">
{% endif %}
<label for="profile-picture">Profile Picture</label>
<input type="file" name="file" id="profile-picture">
@ -60,9 +60,26 @@
</div>
{% if not current_user.email %}
<script>
<script>
{% if not current_user.email %}
addFlashMessage("No Email set. If you loose your account, it will not be possible to recover it!", "error")
</script>
{% endif %}
{% endif %}
// Adjusted from https://stackoverflow.com/a/3814285/14885829
document.getElementById('profile-picture').onchange = (event) => {
let tgt = event.target || window.event.srcElement,
files = tgt.files;
if (FileReader && files && files.length) {
let fr = new FileReader();
fr.onload = () => {
document.getElementById('picture-preview').src = fr.result;
}
fr.readAsDataURL(files[0]);
}
else {
addFlashMessage("Your browser could not show a preview of your profile picture!", "error")
}
}
</script>
{% endblock %}

View file

@ -45,11 +45,8 @@
{% endif %}
<div class="other">
<h2>{{ user.username }}</h2>
<p>Joined {{ user.joined_at.strftime('%Y-%m-%d') }}</p>
<hr>
<p>Best score: {{ scores[0].score | format_result }}</p>
<p>Joined {{ user.joined_at|timesince }}</p>
</div>
</div>
{% endif %}
@ -74,14 +71,13 @@
{% else %}
<td>{{ loop.index }}</td>
{% endif %}
{% if score.users.id == current_user.id %}
<td class="player">{{ score.users.username }}</td>
{% else %}
<td>{{ score.users.username }}</td>
{% endif %}
<td>{{ score.score | format_result }}</td>
<td>
<a
href="{{ url_for('views.index', user=score.users.username) }}"
{% if score.users.id == current_user.id %}id="you"{% endif %}
>{{ score.users.username }}</a>
</td>
<td>{{ score.score|format_result }}</td>
<td>{{ score.scored_at.strftime('%Y-%m-%d') }}</td>
</tr>
{% endfor %}