File uploading using ajax call in laravel 5.4

Question

In my application I need to upload a cover image for a dish.

Here's my AJAX call:

$('#addDishForm').submit(function(e) {
    e.preventDefault();
    var el = $(this);
    var formAction = el.attr('action');
    var formValues = el.serialize();
    console.log(formValues);

    $.ajax({
        type: 'POST',
        url: '/admin/menu',
        data: new FormData(el[0]),
        success: function (data) {
            console.log(data);
        },
        error: function(data) {
            console.error(data);
        }
    });
});

I have an error as a result return from controller in console.

Uncaught TypeError: Illegal invocation

What is the workaround?

Here is the controller's method:

public function store(Request $request)
{
    if($request->hasFile('cover_image'))
    {
        return response()->json([ 'success' => true, 'message' => 'File exists' ]);
    }
    else 
    {
        return response()->json([ 'success' => false, 'message' => 'File doesn\'t exist' ]);
    } 
}

A route:

Route::middleware('auth')->prefix('/admin')->namespace('Admin')->group(function () {
    // other routes ...
    Route::post('/menu', 'MenuController@store');
    // other routes ...
});

Here's the form:

{!! Form::open([ 'method' => 'POST', 'enctype' => 'multipart/form-data', 'id' => 'addDishForm' ]) !!}
    // other form controls ...
    {{ Form::file('cover_image', [ 'class' => 'dropify', 'data-max-file-size' => '2M' ]) }}
    // other form controls ...
{!! Form::close() !!}

@Jonathan I'm not sure whether docs are a relevant answer for my question because I can't understand what is the problem.... — Камилов Тимур, Feb 08 '18 at 18:21
I can't understand where `Illegal invocation` is at. You could also tell us at which part of the code it's thrown — apokryfos, Feb 08 '18 at 18:22
Also check https://stackoverflow.com/questions/6974684/how-to-send-formdata-objects-with-ajax-requests-in-jquery — apokryfos, Feb 08 '18 at 18:24
@apokryfos It's thrown as a result of `return` in controller, I have written at the above — Камилов Тимур, Feb 08 '18 at 18:25

score 4 · Accepted Answer · answered Feb 08 '18 at 18:31

The illegal invocation comes from jQuery trying to serialize a FormData object, when specifying a FormData object as the data parameter to jQuery.ajax you must tell jQuery not to process the data by setting the field processData to false.
Also jQuery will set the content type which you do not want with FormData and to prevent this set contentType to false.

$.ajax({
    type: 'POST',
    url: '/admin/menu',
    data: new FormData(this),
    processData: false,
    contentType: false,
    success: function (data) {
        console.log(data);
    },
    error: function(data) {
        console.error(data);
    }
});

@Musa Thank u for your answer) – Камилов Тимур Feb 08 '18 at 18:35 — Камилов Тимур, Feb 08 '18 at 18:35

File uploading using ajax call in laravel 5.4

1 Answers1