I am trying to make a form that views users profile and displays a picture of a user. I have made a custom user class and added new field with profile picture (avatar). Idea is that when user is looking at the profile he can click on his picture and modal form pops up with displayed current picture (or default picture that looks like anonymous user). Then the user can click on upload new picture of any size and crop it using cropper.js to a standard format being set at 220 x 300 pixels.
To develop this I took couple of examples on the Internet and made a mix of them. It works flawlessly until I wish to save the new picture in user database, this is just ignored with no error displayed whatsoever. Of course, when I do this from Admin interface and upload a picture it works every time.
So, the part when I wish to save picture is triggered from modal form and it is part written in javascript to take data from cropper.js:
$(".js-crop-and-upload").click(function () {
var cropData = $image.cropper("getData");
$("#id_x").val(cropData["x"]);
$("#id_y").val(cropData["y"]);
$("#id_height").val(cropData["height"]);
$("#id_width").val(cropData["width"]);
$("#formUpload").submit();
console.log("BIO C&U");
$("#modalCrop").modal("hide")
});
I have made a new save function for the form upon submit that does the actual cropping:
class ProfileForm(ModelForm):
x = forms.FloatField(widget=forms.HiddenInput())
y = forms.FloatField(widget=forms.HiddenInput())
width = forms.FloatField(widget=forms.HiddenInput())
height = forms.FloatField(widget=forms.HiddenInput())
class Meta:
model = user
fields = ('avatar', 'x', 'y', 'width', 'height',)
def __init__(self, *args, **kwargs):
super(ProfileForm, self).__init__(*args, **kwargs)
def save(self):
profile = super(ProfileForm, self).save()
x = self.cleaned_data.get('x')
y = self.cleaned_data.get('y')
w = self.cleaned_data.get('width')
h = self.cleaned_data.get('height')
image = Image.open(profile.avatar)
cropped_image = image.crop((x, y, w + x, h + y))
resized_image = cropped_image.resize((220, 300), Image.ANTIALIAS)
resized_image.save(profile.avatar.path)
image.save(profile.avatar.path)
return profile
My form has a enctype set:
<form method="post" enctype="multipart/form-data" action="" id="formUpload">
What am I doing wrong?
