How to get data from a Formdata object in my views?

Question

My AJAX call sends a FormData object with an uploaded image data inside it:

$(document).on('submit', '#profileImageForm', function(e){
    e.preventDefault();
    var form_data = new FormData();
    var image = document.getElementById('id_banner_image').files[0].name;
    form_data.append('file', image);

    $.ajax({
        type:'POST',
        url: '/change_banner_image/',
        data : {
            form_data: form_data,
            csrfmiddlewaretoken: $("input[name='csrfmiddlewaretoken']").val(),
        },
        traditional: true,
        cache: false,
        success: function(response){
            console.log('Success');
        },
    });
});

and I succesfully receive the call in my views:

def change_banner_image(request):
    if request.is_ajax():
        data = request.POST.get('form_data')
        profile = get_object_or_404(Profile, user=request.user)
        profile.image = data
        profile.save()
        print(data)

    return HttpResponse()

print(data) prints: [object FormData]. So how would I get the uploaded image from this FormData object? Which will then be the value of profile.image (which is a FileField).

Consider this answer here: https://stackoverflow.com/questions/31866920/django-ajax-upload-image — Sandeep Balagopal, Oct 24 '17 at 07:54

score 0 · Answer 1 · answered Oct 24 '17 at 07:54

0

The issue is because you're encoding the FormData itself, which is incorrect. It is binary data which cannot be encoded in the manner you're attempting.

You instead need to invert the logic to add the CSRF token to the FormData you send. You also need to set processData and contentType to false so the binary data is not amended before the request is sent, and also remove the traditional property. Try this:

$(document).on('submit', '#profileImageForm', function(e){
    e.preventDefault();
    var form_data = new FormData();
    var image = document.getElementById('id_banner_image').files[0].name;
    form_data.append('file', image);
    form_data.append('csrfmiddlewaretoken', $("input[name='csrfmiddlewaretoken']").val());

    $.ajax({
        type:'POST',
        url: '/change_banner_image/',
        data: form_data,
        processData: false,
        contentType: false,
        cache: false,
        success: function(response){
            console.log('Success');
        },
    });
});

answered Oct 24 '17 at 07:54

Rory McCrossan

331,213
40
305
339

`request.POST.get('form_data')` in my views is printing `None`. Any idea why? – Zorgan Oct 24 '17 at 08:09
It's because you're sending binary data. I don't know python, but I would guess there's some kind of 'files' collection you need to get instead, eg. `request.FILES.get('file')` – Rory McCrossan Oct 24 '17 at 08:15
Your primary key not `'form_data'`, ajax post maybe a `list` but include `dict`, try: `console.log(form_data)` or print whole post on python side. – dsgdfg Oct 24 '17 at 08:17
`print(form_data)` returns `None` any idea? – Zorgan Oct 24 '17 at 08:56
He said *don't* use `form_data` - that's the client side name. – Rory McCrossan Oct 24 '17 at 08:57
Yes you're right. `console.log(form_data)` returns a `FormData {}` array. So what would I write to correctly loop over the array? – Zorgan Oct 24 '17 at 09:07
https://stackoverflow.com/questions/851336/multiple-files-upload-using-same-input-name-in-django – Rory McCrossan Oct 24 '17 at 09:08

score 0 · Answer 2 · answered Oct 24 '17 at 07:54

0

you can try this

data = request.data

if you sending file data

files = request.FILES

answered Oct 24 '17 at 07:54

Robert

3,373
1
18
34

How to get data from a Formdata object in my views?

2 Answers2