CODEWITHSUNDEEP
pythondjangodjango-modelsdjango-formsdjango-views
Melonendk
Melonendk

Reputation: 117

(Django) Cannot upload images for the users avatar

So I'm trying to make it possible for users to update their Avatar/Profile image by allowing them to upload their image + I want to implement an image cropper so they can crop the image to a ratio of 1 to 1. All tho I think the first thing is making it possible to upload.

I've searched around trying to make it possible but I think I've almost been everywhere.

The thing is the image field I'm using is like an extension to the User table I basically called it extendeduser that has all the extra information included in it.

Media is set 2 i can upload files from the admin panel and they show normally.

Views.py

@login_required
def useravatar(request, user_pk):
    if request.method == 'POST':
        form = UpdateProfileForm(request.POST, request.FILES, instance=request.user)
        if form.is_valid():
            user = form.save()
            user.refresh_from_db()
            user.extendeduser.avatar = form.cleaned_data('avatar')
            user.save()
            messages.success(request, 'Your avatar was successfully Uploaded!')
            return redirect('useravatar', user_pk=request.user.pk)
    logged_in_user = get_object_or_404(User, pk=request.user.pk)
    requested_user = get_object_or_404(User, pk=user_pk)
    driverslicence = DriversLicenceCategories.objects.all()
    feedback = FeedbackSupportForm()
    password = PasswordChangeForm(request.user)
    avatar = UpdateProfileForm(instance=request.user)
    context = {
        'avatar'        : avatar,
        'logged_in_user': logged_in_user,
        'requested_user': requested_user,
        'feedback'      : feedback,
        'password'      : password,
    }
    return render(request, 'user/avatar.html', context)

Models.py

class ExtendedUser(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE)
    nickname = models.CharField(max_length=20)
    birthdate = models.DateField(null=True, blank=True)
    postal_code = models.CharField(max_length=10)
    phone_number_regex = RegexValidator(regex=r'^\+?1?\d{9,15}$', message="Phone number must be entered in the format: '+4570131415'. Up to 15 digits allowed.")
    phone_number = models.CharField(max_length=16, validators=[phone_number_regex], blank=True)
    phone_number_show = models.BooleanField(default=False)
    emergency_number = models.CharField(max_length=16, validators=[phone_number_regex], blank=True)
    drivers_licence = models.ManyToManyField(DriversLicenceCategories, blank=True)
    avatar = models.ImageField(upload_to='users/avatars', default='static/img/userpreload.png')
    background = models.ImageField(upload_to='users/backgrounds', default='static/img/userpreload.png')

forms.py

class UpdateProfileForm(forms.ModelForm):
    postal_code = forms.CharField(max_length=10, required=True)
    phone_number = forms.CharField(max_length=16, required=True)
    phone_number_show = forms.BooleanField(required=False)
    avatar = forms.ImageField()
    class Meta:
        model = User
        fields = ('username', 'first_name', 'last_name', 'email', 'postal_code', 'phone_number', 'phone_number_show', 'avatar')

Then there is of course the html file with the form

<form action="" method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="custompanel no-m-bottom">
                        <h3>Avatar</h3>
                        <hr style="border-color:rgba(0, 0, 0, 1);">
                        <div class="form-group">
                            <div class="setting-user-avatar">
                                <img class="user-avatar" src="{{ logged_in_user.extendeduser.avatar.url }}">
                            </div>
                            <label for="id_avatar">Change profile image.</label>
                            <input id="id_avatar" style="color: #000;" class="victext-input vic-block full-width" type="file" name="avatar"></input>
                            <small id="id_avatarHelpBlock" class="form-text text-muted">
                                 Current: <a href="{{ logged_in_user.extendeduser.avatar.url }}">{{ logged_in_user.extendeduser.avatar.url }}</a>
                            </small>
                        </div>
                    </div>
                    <button type="submit" class="vicbtn vicbtn-green w-100">Save</button>
                </form>

I hope someone will help me get this to work because im basically totally broken

Upvotes: 0

Views: 767

Answers (2)

Diksha
Diksha

Reputation: 474

Try this: Update this line from your view:

user.extendeduser.avatar = request.FILES['avatar']

Upvotes: 2

Exprator
Exprator

Reputation: 27533

just try with this, as i think, you were saving the profile before even image being added to the avatar column of your extended model

from .models import ExtendedUser

def useravatar(request, user_pk):
    if request.method == 'POST':
        form = UpdateProfileForm(request.POST, request.FILES, instance=request.user)
        if form.is_valid():
            user = form.save()
            av = ExtendedUser.objects.get(user_id=user_pk)
            av.avatar = request.FILES['avatar']
            // other columns if you want to save, same as above line, except request.FILES will be request.POST['input_name']
            av.save()
            messages.success(request, 'Your avatar was successfully Uploaded!')
            return redirect('useravatar', user_pk=request.user.pk)

and change your html

<form action="" method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="custompanel no-m-bottom">
                        <h3>Avatar</h3>
                        <hr style="border-color:rgba(0, 0, 0, 1);">
                        <div class="form-group">
                            <div class="setting-user-avatar">
                                <img class="user-avatar" src="{{ logged_in_user.extendeduser.avatar.url }}">
                            </div>
                            <label for="id_avatar">Change profile image.</label>
                            {{ avatar.as_p }}
                            <small id="id_avatarHelpBlock" class="form-text text-muted">
                                 Current: <a href="{{ logged_in_user.extendeduser.avatar.url }}">{{ logged_in_user.extendeduser.avatar.url }}</a>
                            </small>
                        </div>
                    </div>
                    <button type="submit" class="vicbtn vicbtn-green w-100">Save</button>
                </form>

Upvotes: 1

Related Questions