Django custom user profile image not saving properly - django

Question

I've got a custom user model that when the image is updated it adds characters to the file path making django unable to find the new updated profile image.
MODELS.PY
from django.db import models
from django.contrib.auth.models import AbstractUser
from PIL import Image
from django.conf import settings
import os
class CustomUser(AbstractUser):
username = models.CharField(max_length=255, unique=True)
password = models.CharField(max_length=255)
email = models.EmailField(unique=True)
# Add any additional fields you want to store about users, such as their profile picture, etc.
image = models.ImageField(default='default.png',
upload_to='profile_pics', null=True, blank=True)
def save(self, *args, **kwargs):
# Check if the image field has changed
if self.pk:
orig = CustomUser.objects.get(pk=self.pk)
if orig.image != self.image:
# Delete the previous image file
if orig.image:
orig.image.delete(save=False)
# Create a thumbnail image
if self.image:
try:
image = Image.open(self.image)
except FileNotFoundError:
print("Image file not found:", self.image.path)
return
image.thumbnail((200, 200), Image.ANTIALIAS)
# Save the image to the correct path
image_path = os.path.join(
settings.MEDIA_ROOT, self.image.field.upload_to, self.image.name)
image.save(image_path)
super().save(*args, **kwargs)
Views.py
class UserPostListView(ListView):
model = Post
template_name = 'gorl/user_posts.html'
context_object_name = 'posts'
# paginate_by = 5
def get_queryset(self):
user = get_object_or_404(
CustomUser, username=self.kwargs.get('username'))
return Post.objects.filter(author=user).order_by('-date_posted')
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
user = get_object_or_404(
CustomUser, username=self.kwargs.get('username'))
context['user'] = user
context['show_profile_settings'] = self.request.user.username == user.username
context['comments'] = Comment.objects.all()
total_likes = 0
context['likes'] = {}
# Get the number of likes for each post and store it in the context data
for post in context['posts']:
likes = Like.objects.filter(post_id=post).count()
if likes >= 0:
context['likes'][post.id] = likes
total_likes += likes
context['total_likes'] = total_likes
return context
class UpdateProfileView(LoginRequiredMixin, UserPassesTestMixin, UpdateView):
model = CustomUser
form_class = UpdateProfileForm
template_name = 'gorl/update_profile.html'
def test_func(self):
# Check if the current user is the owner of the profile
return self.request.user == self.get_object()
def form_valid(self, form):
# Save the form data to the database
form.save()
# Check if the user has uploaded a new image
if form.cleaned_data['image']:
# If a new image has been uploaded, delete the old image file
if self.get_object().image:
self.get_object().image.delete(save=False)
# Save the new image to the database
form.save()
messages.success(self.request, 'Your profile has been updated')
return redirect('update-profile', pk=self.object.pk)
def form_invalid(self, form):
messages.error(
self.request, 'There was an error updating your profile')
return redirect('update-profile', pk=self.object.pk)
def handle_no_permission(self):
messages.success(
self.request, "Don't be like that Gorl.")
# redirect to an error page if the user is not the author of the post
return render(self.request, 'gorl/error.html', {'error': "You don't have permission to edit this post."})
FORMS.PY
class UpdateProfileForm(forms.ModelForm):
image = forms.ImageField(required=False)
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_show_labels = True
self.helper.layout = Layout(
Field('username', css_class='form-control'),
Field('email', css_class='form-control'),
Field('image', css_class='form-control'),
)
class Meta:
model = CustomUser
fields = ['username', 'email', 'image']
Clip of settings
STATIC_URL = 'static/'
STATICFILES_DIRS = [BASE_DIR / "static", ]
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
Template
{% extends 'gorl/layout.html' %}
{% load static %}
{% load crispy_forms_tags %}
{% crispy form %}
{% block content %}
<div class="my-5">
<div class="container">
<div class="card shadow mb-3 p-3">
<h3 class="card-header text-pink">Profile Settings</h3>
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
<fieldset class="form-group">
<legend class="border-bottom mb-4 text-pink">
</legend>
{{ form|crispy }}
</fieldset>
<div class="form-group my-3">
<button class="btn btn-outline-info hot-pink-button" type="submit">Save</button>
</div>
</form>
</div>
</div>
</div>
{% endblock content %}
I have in my root project urls.py file
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL,
document_root=settings.MEDIA_ROOT)
I just cannot understand why when I choose a different image file to upload it will take that file and add characters to the end of the file and then when the profile is looking for the image file it does not match the one that was uploaded.