Django ajax jquery file upload

Question

I have a problem with file uploading in my django project. So the question is: how can I pass files to django view through jquery ajax?

At this moment I have

script:

<script type='text/javascript'>
$(document).ready(function() {
    var csrf_token = $('input[name="csrfmiddlewaretoken"]').val();
    $('#upload').click(function() {
        $.ajax({
            csrfmiddlewaretoken: csrf_token,
            type: 'POST',
            url : '../ajax/upload_file/',
            enctype: "multipart/form-data",
            data  : {
                'file': $('#file').val()
            },
            success: function(data) {
                console.log(data)
            }
        })
    })
})
</script>

template:

 <form method="" action="" name='upload_form' id='upload_form' >{% csrf_token %}
    <input type='file' name='file' id='file' />
    <input type='button' value='Upload' id='upload'/>
 </form>

and view:

@csrf_exempt
@xhr_to_json
def verifyFile(request):
    if request.is_ajax():
        file = request.FILES['file']
        return {'message': file}
    else: 
        return HttpResponseForbidden()

now im getting

Traceback (most recent call last):
  File "/usr/local/lib/python2.7/dist-packages/django/core/handlers/base.py", line 111,      in get_response
response = callback(request, *callback_args, **callback_kwargs)
  File "/usr/local/lib/python2.7/dist-packages/django/views/decorators/csrf.py", line 77, in wrapped_view
    return view_func(*args, **kwargs)
 File "/home/vova/git/LV-  083_LAMP.git/Testcase_Project/Testcase_Project/views/decorator.py", line 6, in wrapper
   data = func(*args, **kwargs)
  File "/home/vova/git/LV-   083_LAMP.git/Testcase_Project/Testcase_Project/views/testcase.py", line 96, in verifyFile
    request.FILES['file']
  File "/usr/local/lib/python2.7/dist-packages/django/utils/datastructures.py", line     258, in __getitem__
    raise MultiValueDictKeyError("Key %r not found in %r" % (key, self))
MultiValueDictKeyError: "Key 'file' not found in <MultiValueDict: {}>"

is it possible to do it without external libraries?

Have you tried file = request.FILES.get('file')

catherine
– catherine

2013-04-04 12:33:45 +00:00
Commented Apr 4, 2013 at 12:33 — catherine
– catherine, Commented Apr 4, 2013 at 12:33
returning Object {message: null}

vovaminiof
– vovaminiof

2013-04-04 12:52:35 +00:00
Commented Apr 4, 2013 at 12:52 — vovaminiof
– vovaminiof, Commented Apr 4, 2013 at 12:52
url is right. i can return any other data and it will work

vovaminiof
– vovaminiof

2013-04-04 13:04:14 +00:00
Commented Apr 4, 2013 at 13:04 — vovaminiof
– vovaminiof, Commented Apr 4, 2013 at 13:04
same error Key 'file' not found in <MultiValueDict: {}

vovaminiof
– vovaminiof

2013-04-04 13:07:26 +00:00
Commented Apr 4, 2013 at 13:07 — vovaminiof
– vovaminiof, Commented Apr 4, 2013 at 13:07

Marcos Aguayo · Accepted Answer · 2013-04-04 12:55:47Z

7

Try this:

def upload(request):
  id = request.POST['id']
  path = '/var/www/pictures/%s' % id
  f = request.FILES['picture']
  destination = open(path, 'wb+')
  for chunk in f.chunks():
    destination.write(chunk)
  destination.close()
  # return status to client
  ...

You can read the full tutorial here: http://www.laurentluce.com/posts/upload-to-django-with-progress-bar-using-ajax-and-jquery/

answered Apr 4, 2013 at 12:55

Marcos Aguayo

7,2509 gold badges33 silver badges62 bronze badges

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

2 Comments

vovaminiof Over a year ago

the problem is that request.FILES is empty

Andrei Over a year ago

@vovaminiof if request.FILES is empty, perhaps take a look at this answer: stackoverflow.com/a/5567063/11483646

catherine · Accepted Answer · 2013-04-04 13:18:16Z

1

@csrf_exempt
@xhr_to_json
def verifyFile(request):
    if request.is_ajax():
        file = request.FILES['file']
        return HttpResponse(file)
    else: 
        return HttpResponseForbidden()

<form method="POST" action="" name='upload_form' id='upload_form' enctype="multipart/form-data">
    {% csrf_token %}
    <input type='file' name='file' id='file' />
    <input type='button' value='Upload' id='upload'/>
</form>

edited Apr 4, 2013 at 13:18

answered Apr 4, 2013 at 13:07

catherine

22.8k15 gold badges64 silver badges88 bronze badges

2 Comments

catherine Over a year ago

remove this if request.is_ajax(): in your view and the else statement. test if return to None again

catherine Over a year ago

complete also your form in your template so that it will read the file pass

Pawan Kumar · Accepted Answer · 2015-03-15 17:24:41Z

//html

<form  id = "form_id"   method = "POST" action = "#" enctype="multipart/form-data"> {% csrf_token %}
                        {{modelform_filefield}}
                        <input type = "submit" value="Post"/>
                    </form>

//javascript code

<script>
    $(function(){
    $("#form_id").submit(function(){
    var data = new FormData($('#form_id').get(0));
                $.ajax({
                    type:"POST",
                    url: "your_upload_url",
                    data : data,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(data){
    alert('success');
                    },
                    failure: function(){
                        $(this).addClass("error");
                    }
                });
                return false;
    });
    });
</script>

This will extract the file and forms data from the client end. The URL links to the views where your files are processed and stored.

//views.py

def upload(request):
    if request.is_ajax():
        form = <modelFormName>(request.POST, files=request.FILES)
        if form.is_valid():
            form.save()
            return HttpResponse("form saved")
        else:
            return HttpResponse("form invalid")

    return HttpResponse("not a ajax request")

This should do the trick

Collectives™ on Stack Overflow

Django ajax jquery file upload

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related