save image in django template - django

Question

I know that this question have been asked many times and I already checked many solutions but can not find an explanation to the weird behavior of saving form in this case
as in production saving image is working on my pc and not in my colleagues, in local as well it is working if I change the position of the form save (more below, if more up it does not work)
here the related forms to the template I am working with:
class ProfilePageTitleForm(ModelForm):
class Meta:
model = ProfilePage
fields = [
"title",
]
class ProfilePageDetailsForm(ModelForm):
intro = forms.CharField(
required=True,
widget=forms.Textarea(
attrs={
"class": "max-w-md w-full bg-gray-100 border border-gray-200 "
"rounded-lg text-base outline-none focus:border-blue-600 p-4"
}
),
label=_("Personal introduction"),
help_text=_("maximum number of characters: 80 characters"),
max_length=80,
)
class Meta:
model = ProfilePage
fields = [
"avatar",
"school",
"location",
"intro",
]
here they are separated as I used the title in another template separately
related views
#login_required
def profile_details(request: HttpRequest, pk: int = None) -> HttpResponse:
profile = ProfilePage.objects.get(pk=pk)
user = profile.user
titleprofilepage_form = ProfilePageTitleForm(instance=profile)
profilepage_form = ProfilePageDetailsForm(instance=profile)
if user == request.user or request.user.has_perm("userprofile.manager_permissions"):
if request.method == "POST":
profilepage_form = ProfilePageDetailsForm(
request.POST, request.FILES, instance=profile
)
titleprofilepage_form = ProfilePageTitleForm(request.POST, instance=profile)
if (
profilepage_form.is_valid()
and titleprofilepage_form.is_valid()
):
titleprofilepage_form.save()
profilepage_form.save()
return redirect(profile.get_full_url())
else:
messages.error(
request,
_("You have no permissions to edit this page"),
)
return redirect("/")
context = {
"user": user,
"profilepage_form": profilepage_form,
"titleprofilepage_form": titleprofilepage_form,
}
return render(request, "account/profile_details.html", context)
here if I put profilepage_form.save() in the line upper, the image do not save
the related template
{% extends "base.html" %}
{% load i18n wagtailcore_tags static %}
{% block content %}
<h1 class="text-3xl font-bold mt-7 mb-9 lg:mt-14">{% translate "edit profile" %}</h1>
<form action="" method="post" enctype="multipart/form-data" novalidate>
{# using novalidate to cancel the browser validation and use our form validations #}
{% csrf_token %}
<label for="id_avatar" class="block text-sm font-bold mb-2">
{% translate "profile picture" %}
<span class="pl-2 text-pink-repeat">*</span>
</label>
<div class="flex items-center w-68 overflow-hidden">
<div id="avatar_image" class="w-24 h-24 rounded-half bg-cover bg-center flex-shrink-0" style="background-image:url({{ user.get_user_avatar }})"></div>
<label for="id_avatar" class="flex items-center h-8 px-4 mx-6 text-xs bg-gray-200 rounded-full text-blue-400 cursor-pointer hover:bg-gray-400 flex-shrink-0 w-34 text-center">
{% translate "upload image" %}
</label>
{{ profilepage_form.avatar }}
{% if profilepage_form.avatar.errors %}
<div class="text-red-700 px-4 py-3" role="alert">
<strong>{{ profilepage_form.avatar.errors|escape }}</strong>
</div>
{% endif %}
</div>
<label for="id_title" class="block text-sm font-bold mb-2 mt-10">
{% translate "nick name" %}
<span class="pl-2 text-pink-repeat">*</span>
</label>
{{ titleprofilepage_form.title }}
{% if titleprofilepage_form.title.errors %}
<div class="text-red-700 px-4 py-3" role="alert">
<strong>{{ titleprofilepage_form.title.errors|escape }}</strong>
</div>
{% endif %}
<label for="id_location" class="block text-sm font-bold mb-2 mt-10">
{% translate "address" %}
</label>
{{ profilepage_form.location }}
{% if profilepage_form.location.errors %}
<div class="text-red-700 px-4 py-3" role="alert">
<strong>{{ profilepage_form.location.errors|escape }}</strong>
</div>
{% endif %}
<label for="id_school" class="block text-sm font-bold mb-2 mt-10">
{% translate "what you want to do" %}
</label>
{{ profilepage_form.school }}
{% if profilepage_form.school.errors %}
<div class="text-red-700 px-4 py-3" role="alert">
<strong>{{ profilepage_form.school.errors|escape }}</strong>
</div>
{% endif %}
<label for="id_intro" class="block text-sm font-bold mb-2 mt-10">
{% translate "self introduction" %}
<span class="pl-2 text-pink-repeat">*</span>
</label>
{{ profilepage_form.intro }}
{% if profilepage_form.intro.errors %}
<div class="text-red-700 px-4 py-3" role="alert">
<strong>{{ profilepage_form.intro.errors|escape }}</strong>
</div>
{% endif %}
<span class="helptext block text-sm mt-2">{% translate "Maximum number of characters : 80" %}</span>
<input type="submit" class="button mt-8 flex items-center justify-center text-sm font-bold shadow-md btn-goblue hover:bg-blue-499 active:bg-blue-800 active:shadow-none h-10 w-32 cursor-pointer" value="{% translate 'save' %}" data-button="load">
</form>
{% block footer %}
{% include "footer.html" %}
{% endblock %}
{% endblock %}
{% block extra_js %}
{{ block.super }}
<script type="text/javascript" src="{% static 'js/account_registration.js' %}"></script>
{% endblock %}
my questions are:
1- why changing the order between titleprofilepage_form.save() and profilepage_form.save() in views.py affects the behavior of saving picture (as written now in the file, it saves the image in local)
2- why I was able to save the image on local, in production on my computer but not in my colleague's computer (already cleaned cache)
New Update:
through the comment of Iain Shelvington was able to understand the importance of order as the title form is overriding the profilepage form and used a unique form for the same model
about the difference in production it is because using a user who has a different picture in the different village which is the problem in profile.user.get_user_avatar, I am closing this issue as it has been resolved