Send file to Django through Ajax

Question

I am facing a problem while attempting to send an image through an AJAX request to Django. Here is my HTML:

<form>
<input type="file" id="files" name="image">
</form>

Here is my JS :

var control = document.getElementById("files");
var p = {
        title: $('input[name=title]').val(),
        subtitle: $('input[name=subtitle]').val(), 
        content: $('textarea#article-content').val(),
        image: files[0],
    };
    $.ajax({
        url: '/prive/nouveau-projet',
        type: "POST",
        data: JSON.stringify(p),
        crossDomain: true,
        success: function() {
            window.location.href = '/prive/projets/';
        },
        error: function() {
            console.log("error");
        }
    });

And here is my server-side code:

if request.method == "POST":
    data = request.POST.keys()[0]
    dataJson = json.loads(data)
    p = Projet(title=dataJson['title'], subtitle=dataJson['subtitle'], content=dataJson['content'], image=dataJson['image'])
    p.save()
    return HttpResponse()

That is what I tried but I get errors about dataJson['image']. Could you help me please ?

doniyor · Accepted Answer · 2014-12-15 17:07:28Z

2

you dont need JSON.stringify.

just write it like this:

var data = new FormData();
var img = $('#image_field_id')[0].files[0];
data.append('img', img);
$.ajax({
    url : "/prive/nouveau-projet",
    processData : false,
    contentType : false,
    type : 'POST',
    data : data,
}).done(function(data) {
    // work with data              
});

and in views

if request.method == "POST":
    file = request.FILES.get('img') # FILES instead of POST
    ....

answered Dec 15, 2014 at 17:07

doniyor

38k62 gold badges183 silver badges272 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Send file to Django through Ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related