Overlapping two ImageField in a Django form
I’m trying to edit a user’s profile in django but when editing the banner image and the profile pictura overlap. I mean, I put a different image on each one, but when I save the form, I get the same image.
When a profile is created both are set by default as it comes in models.py.
views.py
@login_required
def EditProfile(request):
user = request.user.id
profile = Profile.objects.get(user__id=user)
user_basic_info = User.objects.get(id=user)
if request.method == 'POST':
form = EditProfileForm(request.POST, request.FILES, instance=profile)
if form.is_valid():
user_basic_info.first_name = form.cleaned_data.get('first_name')
user_basic_info.last_name = form.cleaned_data.get('last_name')
profile.picture = form.cleaned_data.get('picture')
profile.banner = form.cleaned_data.get('banner')
profile.location = form.cleaned_data.get('location')
profile.url = form.cleaned_data.get('url')
profile.birthday = form.cleaned_data.get('birthday')
profile.bio = form.cleaned_data.get('bio')
profile.save()
user_basic_info.save()
return redirect('users:profile', username=request.user.username)
else:
form = EditProfileForm(instance=profile)
context = {
'form':form,
}
return render(request, 'users/edit.html', context)
forms.py
class EditProfileForm(forms.ModelForm):
first_name=forms.CharField(
widget=forms.TextInput(attrs={
'class': 'shadow-sm focus:ring-indigo-500 dark:bg-dark-third dark:text-dark-txt focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md',
})
)
last_name=forms.CharField(
widget=forms.TextInput(attrs={
'class': 'shadow-sm focus:ring-indigo-500 dark:bg-dark-third dark:text-dark-txt focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md',
})
)
picture = forms.ImageField(label='Profile Picture', required=False, widget=forms.FileInput)
banner = forms.ImageField(label='Banner Picture', required=False, widget=forms.FileInput)
location = forms.CharField(widget=forms.TextInput(attrs={'class': 'max-w-lg block w-full shadow-sm dark:bg-dark-third dark:text-dark-txt dark:border-dark-third focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md'}), max_length=25, required=False)
url = forms.URLField(label='Website URL', widget=forms.TextInput(attrs={'class': 'max-w-lg block w-full shadow-sm dark:bg-dark-third dark:text-dark-txt dark:border-dark-third focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md'}), max_length=60, required=False)
bio = forms.CharField(widget=forms.TextInput(attrs={'class': 'max-w-lg block w-full shadow-sm dark:bg-dark-third dark:text-dark-txt dark:border-dark-third focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md'}), max_length=260, required=False)
birthday = forms.DateField(widget= forms.TextInput(attrs={'class': 'max-w-lg block w-full shadow-sm dark:bg-dark-third dark:text-dark-txt dark:border-dark-third focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md'}), required=False)
class Meta:
model = Profile
fields = ('first_name','last_name','picture','banner','location','url','bio','birthday')
models.py
class Profile(models.Model):
user = models.OneToOneField(User, on_delete=models.CASCADE, related_name='profile')
picture = models.ImageField(default='users/user_default_profile.png', upload_to=user_directory_path_profile)
banner = models.ImageField(default='users/user_default_bg.jpg', upload_to=user_directory_path_banner)
verified = models.CharField(max_length=10, choices=VERIFICATION_OPTIONS, default='unverified')
followers=models.ManyToManyField(User, blank=True, related_name="followers")
date_created = models.DateField(auto_now_add=True)
location=models.CharField(max_length=50, null=True, blank=True)
url=models.CharField(max_length=80, null=True, blank=True)
birthday=models.DateField(null=True, blank=True)
bio = models.TextField(max_length=150, null=True, blank=True)
def __str__(self):
return self.user.username
edit.html
<form class="form-horizontal dark:text-dark-txt" method="post" enctype="multipart/form-data">
{% csrf_token %}
<div class="mt-1 sm:mt-0 sm:col-span-2">
<img class="h-28 w-full bg-cover" src="{{user.profile.banner.url}}" alt="{{profile.user.username}} Banner Picture">
<div class="max-w-lg flex justify-center px-6 pt-5 pb-6 border-2 dark:border-dark-third border-gray-300 border-dashed rounded-md">
{{form.banner}}
<div class="space-y-1 text-center">
<div class="flex text-sm text-gray-600">
</div>
</div>
</div>
<!--Profile Picture-->
<div class="mt-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-center sm:border-t dark:border-dark-third border-gray-200 sm:pt-5">
<label for="photo" class="block text-sm font-medium dark:text-dark-txt text-gray-700">
Photo
</label>
<div class="mt-1 sm:mt-0 sm:col-span-2">
<div class="flex items-center">
<span class="mr-4 h-18 w-18 rounded-full overflow-hidden dark:bg-dark-third bg-gray-100">
<img src="{{user.profile.picture.url}}" alt="">
</span>
{{form.picture}}
</div>
</div>
</div>
<div class="mt-4">
<label for="first name" class="block text-sm font-medium dark:text-dark-txt text-gray-700">
First Name
</label>
{{form.first_name}}
</div>
<label for="last name" class="block text-sm font-medium dark:text-dark-txt text-gray-700">
Last Name
</label>
{{form.last_name}}
<label for="bio" class="block text-sm font-medium dark:text-dark-txt text-gray-700">
Bio
</label>
{{form.bio}}
<label for="city" class="block text-sm font-medium dark:text-dark-txt text-gray-700">
Location: City, Country
</label>
{{form.location}}
<label for="birthday" class="block text-sm font-medium dark:text-dark-txt text-gray-700">
Date of Birth: yyyy-mm-dd
</label>
{{form.birthday}}
<label for="url" class="block text-sm font-medium dark:text-dark-txt text-gray-700">
Website URL
</label>
{{form.url}}
</div>
<div class="control-group">
<div class="controls">
<a href="{% url 'users:profile' username=user.username %}" class="mt-4 inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded dark:text-dark-txt text-indigo-700 dark:bg-dark-second bg-indigo-100 dark:hover:bg-dark-third hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-dark-third focus:ring-indigo-500">
Return to Profile </a>
<button type="submit" class="mt-4 inline-flex float-right items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded dark:text-dark-txt text-indigo-700 dark:bg-dark-third bg-indigo-100 dark:hover:bg-dark-third hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-dark-third focus:ring-indigo-500">
Update</button>
</div>
</div>
</div>
</form>