django - uploading file using ajax fails

Question

I am trying to upload picture using ajax in django. When I post the usual way without ajax, it gets uploaded as expected. But when I upload using ajax, I get the success function, but my form gets invalid in the view and the data I get is from the else condition in the view:

{"image":["This field is required."]}

js:

$('#settings-dialog #background-settings #image-device #upload').on('click', function() {
    var modify_frm = $('#settings-dialog #background-settings #image-device #upload-form');
    $.ajax({
        type: modify_frm.attr('method'),
        url: modify_frm.attr('action'),
        data: modify_frm.serialize(),
        dataType: 'json',
        success: function(data) {
            $('#settings-dialog #background-settings #image-device #upload').text(data);
        },
        error: function(data) {
            $('#settings-dialog #background-settings #image-device #upload').text(JSON.stringify(data));
        }
    });
});

What am I missing here? Could you please help me solve this.

View with ajax don't work:

@login_required(login_url='/custom123user/login')
def admin_page_snap_add(request, page_id):
    if not request.user.is_admin:
        return render(request, 'admin_login_invalid.html')
    else:
        page = Page.objects.get(id=page_id)
        if request.user == page.user:
            if request.is_ajax() and request.POST:
                form = PageSnapForm(request.POST, request.FILES)
                if form.is_valid():
                    page_snap = form.save(commit=False)
                    page_snap.page = page
                    page_snap.user = page.user
                    page_snap.save()
                    data = 'Uploaded'
                    return HttpResponse(json.dumps(data), content_type='application/json')
                else:
                    data = form.errors
                    return HttpResponse(json.dumps(data), content_type='application/json')
            else:
                raise Http404
        else:
            return render(request, 'wrong_user.html')

can you please edit and narrow down your problem?? – Rohit416 Nov 29 '15 at 07:49 — Rohit416, Nov 29 '15 at 07:49
are you connected to jquery? – i am me Nov 29 '15 at 08:01 — i am me, Nov 29 '15 at 08:01
@AjaxGuru Do you mean loading the jquery file, then yes. – Benjamin Smith Max Nov 29 '15 at 08:08 — Benjamin Smith Max, Nov 29 '15 at 08:08
`#upload` is id of the submit type button in form, yes?? – Rohit416 Nov 29 '15 at 09:29 — Rohit416, Nov 29 '15 at 09:29

score 1 · Accepted Answer · edited May 23 '17 at 12:07

1

Uploading images using AJAX is not as straight forward as a normal upload.

See this question: How to send FormData objects with Ajax-requests in jQuery?

And then there's a plug-in for jQuery called jQuery Form Plugin. It takes care of all the dirty work for you so you don't have to worry about binding files to the form, etc etc. Here it is: http://malsup.com/jquery/form/

edited May 23 '17 at 12:07

Community

1
1

answered Nov 29 '15 at 10:51

xyres

20,487
3
56
85

django - uploading file using ajax fails

1 Answers1