separate avatar upload

mominur-helios · mominur-helios · commit b2c0598c9824 · 2023-10-17T11:50:06.000+06:00
diff --git a/apps/users/forms.py b/apps/users/forms.py
@@ -72,15 +72,12 @@ class UserPasswordChangeForm(PasswordChangeForm):
 class ProfileForm(forms.ModelForm):
     class Meta:
         model = Profile
-        # fields = ('full_name', 'country', 'city', '' 'address', 'phone', 'avatar', )
-        exclude = ('user', 'role',)
+        exclude = ('user', 'role', 'avatar',)
 
     def __init__(self, *args, **kwargs):
         super(ProfileForm, self).__init__(*args, **kwargs)
 
         for field_name, field in self.fields.items():
             self.fields[field_name].widget.attrs['placeholder'] = field.label
             self.fields[field_name].widget.attrs['class'] = 'shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500'
-            self.fields[field_name].widget.attrs['required'] = False
-
-            self.fields['avatar'].widget.attrs['class'] = "block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
+            self.fields[field_name].widget.attrs['required'] = False
diff --git a/apps/users/urls.py b/apps/users/urls.py
@@ -24,4 +24,5 @@
     ), name='password_reset_complete'),
 
     path('profile/', views.profile, name='profile'),
+    path('upload-avatar/', views.upload_avatar, name='upload_avatar'),
 ]
diff --git a/apps/users/views.py b/apps/users/views.py
@@ -7,6 +7,7 @@
 from apps.users.forms import SigninForm, SignupForm, UserPasswordChangeForm, UserSetPasswordForm, UserPasswordResetForm, ProfileForm
 from django.contrib.auth import logout
 from django.urls import reverse
+from django.contrib.auth.decorators import login_required
 
 # Create your views here.
 
@@ -48,10 +49,11 @@ def signout_view(request):
     return redirect(reverse('signin'))
 
 
+@login_required(login_url='/users/signin/')
 def profile(request):
     profile = get_object_or_404(Profile, user=request.user)
     if request.method == 'POST':
-        form = ProfileForm(request.POST, request.FILES, instance=profile)
+        form = ProfileForm(request.POST, instance=profile)
 
         if form.is_valid():
             form.save()
@@ -61,4 +63,12 @@ def profile(request):
     context = {
         'form': form,
     }
-    return render(request, 'pages/dashboard/profile.html', context)
+    return render(request, 'pages/dashboard/profile.html', context)
+
+
+def upload_avatar(request):
+    profile = get_object_or_404(Profile, user=request.user)
+    if request.method == 'POST':
+        profile.avatar = request.FILES.get('avatar')
+        profile.save()
+    return redirect(request.META.get('HTTP_REFERER'))
diff --git a/templates/includes/navigation.html b/templates/includes/navigation.html
@@ -1,3 +1,5 @@
+{% load static %}
+
 <nav class="fixed z-30 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
     <div class="px-3 py-3 lg:px-5 lg:pl-3">
       <div class="flex items-center justify-between">
@@ -335,8 +337,11 @@
                 class="flex text-sm bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
                 id="user-menu-button-2" aria-expanded="false" data-dropdown-toggle="dropdown-2">
                 <span class="sr-only">Open user menu</span>
-                <img class="w-8 h-8 rounded-full" src="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
-                  alt="user photo">
+                {% if request.user.profile.avatar %}
+                  <img class="w-8 h-8 rounded-full" src="{{ request.user.profile.avatar.url }}" alt="user photo">
+                {% else %}
+                  <img class="w-8 h-8 rounded-full" src="{% static "dist/img/default-user.png" %}" alt="user photo">
+                {% endif %}
               </button>
             </div>
 
diff --git a/templates/pages/dashboard/profile.html b/templates/pages/dashboard/profile.html
@@ -4,65 +4,6 @@
 
 {% block content %}
 
-{% comment %} <main>
-    <div class="px-4 pt-6 flex flex-row gap-7">
-        <div class="w-full max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
-            <div class="flex justify-end px-4 pt-4">
-                <button id="dropdownButton" data-dropdown-toggle="dropdown" class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-1.5" type="button">
-                    <span class="sr-only">Open dropdown</span>
-                    <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 3">
-                        <path d="M2 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm6.041 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM14 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z"/>
-                    </svg>
-                </button>
-                <!-- Dropdown menu -->
-                <div id="dropdown" class="z-10 hidden text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
-                    <ul class="py-2" aria-labelledby="dropdownButton">
-                    <li>
-                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Edit</a>
-                    </li>
-                    <li>
-                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Export Data</a>
-                    </li>
-                    <li>
-                        <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Delete</a>
-                    </li>
-                    </ul>
-                </div>
-            </div>
-            <div class="flex flex-col items-center pb-10">
-                {% if request.user.profile.avatar %}
-                    <img class="w-24 h-24 mb-3 rounded-full shadow-lg" src="{{ request.user.profile.avatar.url }}" alt="Bonnie image"/>
-                {% else %}
-                    <img class="w-24 h-24 mb-3 rounded-full shadow-lg" src="{% static "dist/img/default-user.png" %}" alt="Bonnie image"/>
-                {% endif %}
-                <h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">
-                    {% if request.user.profile.full_name %}
-                        {{request.user.profile.full_name}}
-                    {% else %}
-                        {{ request.user.username }}
-                    {% endif %}
-                </h5>
-                <span class="text-sm text-gray-500 dark:text-gray-400 block mb-2">{{ request.user.profile.role }}</span>
-                <span class="text-sm text-gray-500 dark:text-gray-400 block mb-2">{{ request.user.profile.phone }}</span>
-                <span class="text-sm text-gray-500 dark:text-gray-400 block mb-2">{{ request.user.profile.address }}</span>
-            </div>
-        </div>
-
-        <form method="post" class="w-full border border-gray-200 rounded-lg p-3 shadow dark:bg-gray-800 dark:border-gray-700" enctype="multipart/form-data">
-            {% csrf_token %}
-
-            {% for field in form %}
-            <div class="relative z-0 w-full mb-6 group">
-                <label for="{{ field.name }}" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ field.label }}</label>
-                {{ field }}
-            </div>
-            {% endfor %}
-            <button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Submit</button>
-        </form>
-  
-    </div>
-</main> {% endcomment %}
-
 <div class="grid grid-cols-1 px-4 pt-6 xl:grid-cols-3 xl:gap-4 dark:bg-gray-900">
     <div class="mb-4 col-span-full xl:mb-2">
         <nav class="flex mb-5" aria-label="Breadcrumb">
@@ -107,15 +48,19 @@ <h3 class="mb-1 text-xl font-bold text-gray-900 dark:text-white">{{ request.user
                     <div class="mb-4 text-sm text-gray-500 dark:text-gray-400">
                         JPG, GIF or PNG. Max size of 800K
                     </div>
-                    <div class="flex items-center space-x-4">
-                        <button type="button" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-blue-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
-                            <svg class="w-4 h-4 mr-2 -ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.5 13a3.5 3.5 0 01-.369-6.98 4 4 0 117.753-1.977A4.5 4.5 0 1113.5 13H11V9.413l1.293 1.293a1 1 0 001.414-1.414l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13H5.5z"></path><path d="M9 13h2v5a1 1 0 11-2 0v-5z"></path></svg>
-                            Upload picture
-                        </button>
+                    <form method="post" action="{% url "upload_avatar" %}" enctype="multipart/form-data" class="flex items-center space-x-4">
+                        {% csrf_token %}
+                        <label for="avatar">
+                            <div class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-blue-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
+                                <svg class="w-4 h-4 mr-2 -ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.5 13a3.5 3.5 0 01-.369-6.98 4 4 0 117.753-1.977A4.5 4.5 0 1113.5 13H11V9.413l1.293 1.293a1 1 0 001.414-1.414l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13H5.5z"></path><path d="M9 13h2v5a1 1 0 11-2 0v-5z"></path></svg>
+                                Upload picture
+                            </div>
+                        </label>
+                        <input onchange="this.form.submit()" type="file" class="hidden" name="avatar" id="avatar">
                         <button type="button" class="py-2 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
                             Delete
                         </button>
-                    </div>
+                    </form>
                 </div>
             </div>
         </div>
@@ -153,7 +98,7 @@ <h3 class="mb-4 text-xl font-semibold dark:text-white">Language & Time</h3>
     <div class="col-span-2">
         <div class="p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800">
             <h3 class="mb-4 text-xl font-semibold dark:text-white">General information</h3>
-            <form method="post" enctype="multipart/form-data">
+            <form method="post">
                 {% csrf_token %}
 
                 <div class="grid grid-cols-6 gap-6">

Original file line number	Diff line number	Diff line change
`@@ -24,4 +24,5 @@`
`24`	`24`	`), name='password_reset_complete'),`
`25`	`25`
`26`	`26`	`path('profile/', views.profile, name='profile'),`
	`27`	`+ path('upload-avatar/', views.upload_avatar, name='upload_avatar'),`
`27`	`28`	`]`