Added UserForm to profile and handled POST request to change profile photo

pages/forms.py

@@ -6,6 +6,14 @@ class HomeForm(forms.Form):
     name = forms.CharField(label='', max_length=100)
 
 
+class UserForm(forms.ModelForm):
+    class Meta:
+        model = User
+        fields = ['profile_photo']
+        label = {
+            'profile_photo': '',
+        }
+
 class KeyForm(forms.ModelForm):
     class Meta:
         model = Key

pages/models.py

@@ -2,10 +2,8 @@ from django.db import models
 
 
 class User(models.Model):
-    nickname = models.CharField(max_length=50, default='Your nickname')
-    bio = models.TextField(
-        max_length=100,
-        default='A short description about yourself.')
+    nickname = models.CharField(max_length=50)
+    bio = models.TextField(max_length=100)
     profile_photo = models.ImageField()
 
     def __str__(self):

pages/views.py

@@ -3,6 +3,7 @@ from django.shortcuts import render, redirect
 from django.http import HttpResponse
 from .forms import (
     HomeForm,
+    UserForm,
     KeyForm,
     ItemsThisWeekForm,
     ItemsTodayForm,
@@ -23,17 +24,28 @@ def ShowHome(request):
 
 
 def ShowProfile(request):
+    form = UserForm()
     if User.objects.count() == 0:
         user = User(
         nickname='Your nickname',
-        bio='A short description about yourself.'
+        bio='A short description about yourself.',
+        profile_photo='default.jpg'
         )
         user.save()
     else:
         user = User.objects.get(pk=1)
     context = {
+        'form': form,
         'user': user,
     }
+
+    if request.method == 'POST':
+        current = User.objects.get(pk=1) #allows us to edit current photo
+        form = UserForm(request.POST, request.FILES, instance=current)
+        if form.is_valid():
+            form.save()
+            return redirect('profile')
+
     return render(request, 'profile.html', context)
 
 

static/css/styles.css

@@ -48,3 +48,9 @@ a {
   font-size: 1.5em;
   padding: 150px;
 }
+
+#image {
+  max-width: 200px;
+  max-height: 200px;
+  object-fit: contain;
+}

templates/profile.html

@@ -14,7 +14,13 @@
     <p><b>Bio:</b> {{ user.bio }}</p>
   </div>
 
-  <div>
+  <div id='image-container'>
+    <img class='image' src='{{user.profile_photo.url}}'>
+    <form action='' method='POST' enctype='multipart/form-data'>
+      {% csrf_token %}
+      {{ form.profile_photo }}
+      <input type='submit' name='Submit' value='Change'>
+    </form>
   </div>
 </div>
 

website/settings.py

@@ -125,3 +125,6 @@ USE_TZ = True
 
 STATIC_URL = '/static/'
 STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
+
+MEDIA_URL = '/images/'
+MEDIA_ROOT = os.path.join(BASE_DIR, 'static/images')

website/urls.py

 from django.contrib import admin
 from django.urls import include, path
 
+from django.conf.urls.static import static
+from django.conf import settings
+
 urlpatterns = [
     path('', include('pages.urls')),
     path('admin/', admin.site.urls),
 ]
+
+urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)