Uncaught (in promise) TypeError: Illegal invocation

Uncaught (in promise) TypeError: Illegal invocation error using jQuery ajax code. I don’t understand how this ajax JS parameters works but digging a deep research about the error shows me some correct solution. Here’s the code of mine that has `Uncaught (in promise) TypeError: Illegal invocation` error.

JS code that has `Uncaught (in promise) TypeError: Illegal invocation` error

In this example, this `file : _this.files[0]` causing me error so I have to remove this. `_this.files[0]` intended to get the input file data but I think ajax has an issue on this.

$.ajax({
    type    : "POST",
    url     : ae_addon.ajaxurl,
    data    : {
        action : 'single_image_crop',
        id : id,
        file : _this.files[0]
    },
    beforeSend: function( response ) {
        //console.log(response);
    },
    success: function( response ){
        console.log( response );
    },      
});

JS code that has no `Uncaught (in promise) TypeError: Illegal invocation` error

Option 1:

$.ajax({
    type    : "POST",
    url     : ae_addon.ajaxurl,
    data    : {
        action      : 'single_image_crop',
        id : id,
    },
    beforeSend: function( response ) {
        //console.log(response);
    },
    success: function( response ){
        console.log( response );
    },      
});

Option 2:

Adding `processData: false` and `contentType: false` ajax parameters in the data array, error is gone. Why? I don’t know the reason too but maybe jQuery.ajax() can explain it to you. But this on my end success response is 0 so I chose `Option 1`.

$.ajax({
    type    : "POST",
    url     : ae_addon.ajaxurl,
    processData: false,
    contentType: false,
    data    : {
        action      : 'single_image_crop',
        id : id,
        file : _this.files[0]
    },
    beforeSend: function( response ) {
        //console.log(response);
    },
    success: function( response ){
        console.log( response );
    },      
});