Is this the wrong logic for image uploading with django? form.is_valid = false

Question

I am really new to django, and I'm not sure I completely understand how forms work or how to use them. I've been looking through a couple tutorials concering file-uploading, but there are a lot of different ways it seems. I'll just include the whole process from top to bottom.

I get a 500 error, because form.is_valid does not return true.

I'll be really gratefull for any help/tips :)

profile.html

<form role="form" enctype="multipart/form-data" ng-submit="profile.upload_picture()">
    <input id="id_image" type="file" class="" name="image" ng-model="profile.image">
    <input type="hidden" value="{{ profile.user.email }}" ng-model="profile.email">
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

ProfileController.js

function upload_picture() {
    ProfileHandler.setProfilePicture(vm.image, vm.email);
}

ProfileHandler.js

function setProfilePicture(profile_pic, email) {
    return $http.post('/api/v1/profile/picture/', {
        profile_pic: profile_pic,
            email: email
        }).then(imageSuccessFn, imageErrorFn);
    }

ProfilePictureView

class ProfilePictureView(views.APIView):
    def post(self, request):
        if request.method == 'POST':
            form = ProfileImageForm(request.POST, request.FILES)
            if form.is_valid():
                str_data = request.body.decode('utf-8')
                data = json.loads(str_data)
                email = data.get('email', None)
                acc = Account.objects.get(email=email)
                acc.model_pic = form.cleaned_data['image']
                acc.save()
                return Response({
                    'status': 'Accepted',
                    'message': 'Image uploaded.'
                }, status=status.HTTP_202_ACCEPTED)
            else:
                return Response({
                    'status': 'Internal server error',
                    'message': 'Form not valid'
                }, status=status.HTTP_500_INTERNAL_SERVER_ERROR)
        else:
            return Response({
                'status': 'Method not allowed',
                'message': 'Only post is accepted'
            }, status=status.HTTP_405_METHOD_NOT_ALLOWED)

ProfileImageForm

class ProfileImageForm(forms.Form):
    image = forms.FileField(label='Select a profile Image')

AccountModel

class Account(AbstractBaseUser):
    ....
    image = models.ImageField(upload_to='profile_images', blank=True)
    ....

Urls (excluded some urls)

urlpatterns = patterns(
    '',
    url(r'^api/v1/', include(router.urls)),
    .....,
    url(r'^api/v1/profile/picture/$', ProfilePictureView.as_view(), name='profile'),
    url('^.*$', IndexView.as_view(), name='index'),
) + static(settings.MEDIA_URL, document_root=settings.MEDIA_URL);

Settings.py

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

Answer 1

You don't have a csrf token input in your form (documentation). Also, add method="post" attribute to the form.

<form role="form" method="post" enctype="multipart/form-data" ng-submit="profile.upload_picture()">
    {% csrf_token %}
    <input id="id_image" type="file" class="" name="image" ng-model="profile.image">
    <input type="hidden" value="{{ profile.user.email }}" ng-model="profile.email">
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Answer 2

You need to add {% csrf_token %} in your form in the profile.htm file.

<form>
    {% csrf_token %}
</form>

What this line will do is to add an hidden input field inside your form which contains a token. The token is submitted along with the form, and Django automatically checks the value of the token to see if this post request is actually coming from your "frontend" rather than somebody else's.

Also, add method="post":

<form method="post">
</form>