mirror of https://gitlab.crans.org/bde/nk20
64 lines
2.0 KiB
HTML
64 lines
2.0 KiB
HTML
|
{% extends "member/profile_detail.html" %}
|
||
|
|
{% load i18n static pretty_money django_tables2 crispy_forms_tags %}
|
||
|
|
|
||
|
|
{% block profile_content %}
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-sm-4 text-center">
|
||
|
|
<img class="img-thumbnail" alt="" src="{{user_object.note.display_image.url }}"/>
|
||
|
|
<p class=""> {% trans "current image" %} </p>
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-4 justify-content-center">
|
||
|
|
<form class=" text-center form my-2" action="" enctype="multipart/form-data" method="post">
|
||
|
|
{% csrf_token %}
|
||
|
|
{{ form |crispy }}
|
||
|
|
<button class="btn btn-primary mx-2" type="submit">
|
||
|
|
{% trans "Change image" %}
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-4">
|
||
|
|
<div id="image-holder"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{% endblock %}
|
||
|
|
{% block extrajavascript%}
|
||
|
|
<script>
|
||
|
|
// https://codepedia.info/upload-image-using-jquery-ajax-asp-net-c-sharp/
|
||
|
|
$("#id_image").on('change', function () {
|
||
|
|
|
||
|
|
//Get count of selected files
|
||
|
|
var countFiles = $(this)[0].files.length;
|
||
|
|
|
||
|
|
var imgPath = $(this)[0].value;
|
||
|
|
var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
|
||
|
|
var image_holder = $("#image-holder");
|
||
|
|
image_holder.empty();
|
||
|
|
|
||
|
|
if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
|
||
|
|
if (typeof (FileReader) != "undefined") {
|
||
|
|
|
||
|
|
//loop for each file selected for uploaded.
|
||
|
|
for (var i = 0; i < countFiles; i++) {
|
||
|
|
|
||
|
|
var reader = new FileReader();
|
||
|
|
reader.onload = function (e) {
|
||
|
|
$("<img />", {
|
||
|
|
"src": e.target.result,
|
||
|
|
"class": "img-thumbnail"
|
||
|
|
}).appendTo(image_holder);
|
||
|
|
}
|
||
|
|
|
||
|
|
image_holder.show();
|
||
|
|
reader.readAsDataURL($(this)[0].files[i]);
|
||
|
|
}
|
||
|
|
|
||
|
|
} else {
|
||
|
|
alert("{% trans 'This browser does not support FileReader.' %}");
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
alert("{% trans 'Please select only images' %}");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
{% endblock %}
|