profile picture update view is working

apps/member/urls.py

@@ -15,7 +15,7 @@ urlpatterns = [
     path('user/', views.UserListView.as_view(), name="user_list"),
     path('user/<int:pk>', views.UserDetailView.as_view(), name="user_detail"),
     path('user/<int:pk>/update', views.UserUpdateView.as_view(), name="user_update_profile"),
-    path('user/<int:pk>/update_pic', views.UserUpdateView.as_view(), name="user_update_pic"),
+    path('user/<int:pk>/update_pic', views.ProfilePictureUpdateView.as_view(), name="user_update_pic"),
     path('user/<int:pk>/aliases', views.AliasView.as_view(), name="user_alias"),
     path('user/aliases/delete/<int:pk>', views.DeleteAliasView.as_view(), name="user_alias_delete"),
     path('manage-auth-token/', views.ManageAuthTokens.as_view(), name='auth_token'),

apps/member/views.py

@@ -207,7 +207,36 @@ class DeleteAliasView(LoginRequiredMixin, DeleteView):
 
     def get(self, request, *args, **kwargs):
         return self.post(request, *args, **kwargs)
-   
+
+class ProfilePictureUpdateView(LoginRequiredMixin, FormMixin, DetailView):
+    model = User
+    template_name = 'member/profile_picture_update.html'
+    context_object_name = 'user_object'
+    form_class = ImageForm
+    def get_context_data(self,*args,**kwargs):
+        context = super().get_context_data(*args,**kwargs)
+        context['form'] = self.form_class(self.request.POST,self.request.FILES)
+        return context
+        
+    def get_success_url(self):
+        return reverse_lazy('member:user_detail', kwargs={'pk': self.object.id})
+
+    def post(self,request,*args,**kwargs):
+        form  = self.get_form()
+        self.object = self.get_object()
+        if form.is_valid():
+            return self.form_valid(form)
+        else:
+            print('is_invalid')
+            print(form)
+            return self.form_invalid(form)
+
+    def form_valid(self,form):
+        print(form)
+        self.object.note.display_image = form.cleaned_data.get("image","pic/default.png")
+        self.object.note.save()
+        return super().form_valid(form)
+
 class ManageAuthTokens(LoginRequiredMixin, TemplateView):
     """
     Affiche le jeton d'authentification, et permet de le regénérer

apps/note/forms.py

@@ -23,15 +23,11 @@ class AliasForm(forms.ModelForm):
         self.fields["name"].widget.attrs={"placeholder":_('New Alias')}
         
 
-class ImageForm(forms.ModelForm):
-    class Meta:
-        model = Note
-        fields = ('display_image',)
+class ImageForm(forms.Form):
+    image = forms.ImageField(required = False,
+                             label=_('select an image'),
+                             help_text=_('Maximal size: 2MB'))
 
-    def __init__(self,*args,**kwargs):
-        super().__init__(*args,**kwargs)
-        self.fields["display_image"].label = _("select an image")
-        self.fields["display_image"].widget.attrs={"help_text":_('Maximal size: 2MB')}
 
 class TransactionTemplateForm(forms.ModelForm):
     class Meta:

apps/note/models/notes.py

@@ -43,7 +43,8 @@ class Note(PolymorphicModel):
     display_image = models.ImageField(
         verbose_name=_('display image'),
         max_length=255,
-        blank=True,
+        blank=False,
+        null=False,
         default='pic/default.png'
     )
     created_at = models.DateTimeField(

templates/member/profile_detail.html

@@ -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>

templates/member/profile_picture_update.html

@@ -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 %}