Aditya Singh
Aditya Singh

Reputation: 76

Uncaught TypeError: Illegal invocation

here is the html

<input id="fileUpload" multiple="multiple" type="file"/> 
 <ul>
 <li><div id="image-holder"></div></li>
 <li><input type="submit" value="Next"></li>
</ul>

here is the script

<script type="text/javascript">
    $('#submit').click(function() {  

    var files = $("[type='file']")[0].files;

    console.log(files)

    var data = {
       'images[]' : files , 
       csrfmiddlewaretoken: '{{csrf_token}}'
      }

    $.ajax({
            type: "POST",
            url : "{% url 'data_entry' %}",
            data: data,
            success: function(data) {  
            },
            error: function(response, error) {
        }
    });
}); 
</script>

On submit click i get this error

Uncaught TypeError: Illegal invocation

How can i send images using jquery to django view?

Upvotes: 2

Views: 1712

Answers (1)

Raja Simon
Raja Simon

Reputation: 10305

You have to tell the Jquery don't process the files. And also I found the workaround to add file in data... hope this will help...

that Illegal invocation error is because ajax doesn't handle objects... that's why we serialize form before entering into ajax and now your case you directly inject the file object then the error.

var data = new FormData();
$.each(files, function(key, value)
{
    data.append(key, value);
});

And in ajax...

$.ajax({
    ....
    processData: false,
    ....

Upvotes: 1

Related Questions