Django file upload ajax call post using jquery

Question

How exactly do I upload a file using an ajax call ? My form in template

<form action="images/" enctype="multipart/form-data" method="POST" class="upload">                                            
    <table>
        {{ form.as_table }}
        <td><input type = "button" onclick="" value="Upload" id = "test"/</td>
    </table>
</form>

My jQuery function :

$(document).ready(function(){
    $("#test").click(function(){
        var string = $("form.upload").serialize();
        alert(string);
        $.ajax({
            url :'/test/',
            type:'post',
            data: {datas:string},  
        dataType: "json",           
         success: function(response) {
                    alert(response);
                  }
        });
    });
});

My view :

@csrf_exempt        
def test(request):
    if request.is_ajax():
        form = ImageUploadForm(request.POST)
        if form.is_valid():
            form.save()
        return HttpResponse("Saved !!!!")

Here I have the view for the file upload but the file does not appear in the form variable in the django view . What should I do to get the file in the view ? The form has a filefield for uploading . It is a model form.

sneawo · Accepted Answer · 2012-12-18 08:29:14Z

4

2 important pieces are missing here:

jQuery.serialize() doesn't do anything to file fields. Check out jQuery form plugin for a robust method of posting form with files via Ajax
You need to explicitly pass the uploaded files to the form constructor: form = ImageUploadForm(data=request.POST, files=request.FILES)

edited Dec 18, 2012 at 8:29

sneawo

3,6321 gold badge28 silver badges31 bronze badges

answered Dec 18, 2012 at 7:58

atereshkin

7065 silver badges8 bronze badges

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

Collectives™ on Stack Overflow

Django file upload ajax call post using jquery

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