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>

Back to Top