javascript illegal invocation in $.ajax

Question

I want to upload an image using ajax in Laravel. Sending formData is giving me

Uncaught TypeError: Illegal invocation
at e (jquery-2.1.4.js:4)
at Ab (jquery-2.1.4.js:4)
at Function.n.param (jquery-2.1.4.js:4)
at Function.ajax (jquery-2.1.4.js:4)
at HTMLFormElement.<anonymous> (products:153)
at HTMLFormElement.dispatch (jquery-2.1.4.js:3)
at HTMLFormElement.r.handle (jquery-2.1.4.js:3)

in the console. I checked the networks and found that formData is fine.

Here is my ajax call

$('#product_form').on('submit', function (e) {
    e.preventDefault();

    var form_data = new FormData( $('#product_form')[0]);
    $.ajax({
        type: 'POST',
        url: '/admin/insert/products',
        data : form_data,
        success: function (result) {
            if(result.success == 1){
                $('#product_message').html('product Successfully Added!!');
            }
        },
        error: function(result){
            $('#product_message').html('Something went wrong!! Login Again!!');
            $('#product_submit').prop("disabled" ,false);
            $('#product_submit').html("Add product");
        }
    });
});

And this is my form in the view

<form class="col s12" method="post" enctype="multipart/form-data" id="product_form">
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <div class="row">
        <div class="input-field col s12 m4 offset-m4">
            <input id="name" type="text" class="validate" name="name">
            <label for="name">Item Name</label>
        </div>
        <div class="input-field col s12 m4 offset-m4">
            <input id="tagline" type="text" class="validate" name="tagline">
            <label for="tagline">Tagline</label>
        </div>
        <div class="input-field col s12 m4 offset-m4">
            <div class="file-field input-field">
                <div class="btn red">
                    <span>Item Pic</span>
                    <input type="file" id="pic" name="item">
                </div>
                <div class="file-path-wrapper">
                    <input class="file-path validate" type="text">
                </div>
            </div>
        </div>
        <div class="input-field col s12 m4 offset-m4">
            <input id="brand" type="text" class="validate" name="brand" style="text-transform:uppercase;">
            <label for="brand">Brand Name</label>
        </div>
        <div class="input-field col s12 m4 offset-m4">
            <select name="category">
                <option value="" selected>Choose Category</option>
                @foreach($categories as $category)
                <option value="{{$category->name}}">{{$category->name}}</option>
                  @endforeach
            </select>
            <label>Select Item Category</label>

        </div>
        <div class="input-field col s12 m4 offset-m4">
            <button type="submit" class="btn col s12 red" id="product_submit">Add Product</button>
        </div>
    </div>
</form>

Need to prevent internal data encoding. Not hard to research this problem. Google "jquery ajax upload" — charlietfl, Jan 28 '17 at 13:54
Possible duplicate of [ajax formdata : Illegal invocation](http://stackoverflow.com/questions/16501524/ajax-formdata-illegal-invocation) — Ankh, Mar 13 '17 at 16:39

score 1 · Accepted Answer · answered Jan 28 '17 at 13:58

1

Add the following parameters to the passed object to $.ajax:

contentType: false,
// The following is necessary so jQuery won't try to convert the object into a string
processData: false

answered Jan 28 '17 at 13:58

Siah

341
2
5

javascript illegal invocation in $.ajax

1 Answers1