mirror of
				https://gitlab.crans.org/bde/nk20
				synced 2025-11-04 01:12:08 +01:00 
			
		
		
		
	profile picture update view is working
This commit is contained in:
		@@ -6,7 +6,9 @@
 | 
			
		||||
    <div class="col-md-3 mb-4">
 | 
			
		||||
        <div class="card bg-light shadow">
 | 
			
		||||
            <div class="card-top text-center">
 | 
			
		||||
                <img src="{{ object.note.display_image.url }}" class="img-thumbnail mt-2" >
 | 
			
		||||
                <a  href="{% url 'member:user_update_pic' object.pk  %}">
 | 
			
		||||
                    <img src="{{ object.note.display_image.url }}" class="img-thumbnail mt-2" >
 | 
			
		||||
                </a>
 | 
			
		||||
            </div>
 | 
			
		||||
            <div class="card-body">
 | 
			
		||||
                <dl class="row">
 | 
			
		||||
@@ -46,7 +48,6 @@
 | 
			
		||||
                {%if request.get_full_path != user_profile_url %}
 | 
			
		||||
                <a class="btn btn-primary btn-sm" href="{{ user_profile_url }}">{% trans 'View Profile' %}</a>
 | 
			
		||||
                {% endif %}
 | 
			
		||||
                <a class="btn btn-primary btn-sm" href="{% url 'member:user_update_pic' object.pk  %}">{% trans 'Change Avatar' %}</a>
 | 
			
		||||
            </div>
 | 
			
		||||
        </div>
 | 
			
		||||
    </div>
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										63
									
								
								templates/member/profile_picture_update.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										63
									
								
								templates/member/profile_picture_update.html
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,63 @@
 | 
			
		||||
{% 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 %}
 | 
			
		||||
		Reference in New Issue
	
	Block a user