Uncaught TypeError: конструктор FormData: аргумент 1 не реализует интерфейс HTMLFormElement. в ларавеле

Моя форма похожа на эту демонстрацию

В.1 Я хотел бы преобразовать эту форму в ajax, но мне кажется, что в моем коде ajax чего-то не хватает. При отправке вообще ничего не делает.

Q2. Я также хочу, чтобы функция срабатывала при изменении, когда файл был выбран, чтобы не ждать отправки.

Q3. Я хочу, когда нажимаю кнопку «Следующий шаг». Все формы сохранить и перейти на следующую страницу.

мой клинок

<form method = "post" enctype = "multipart/form-data" action = "{{ route('update', auth()->id()) }}">
    @csrf
    @method('put')
    <fieldset>
        @include('Home.steps.step-1')
    </fieldset>
    <fieldset>
        @include('Home.steps.step-2')
    </fieldset>
    <fieldset>
        @include('Home.steps.step-3')
    </fieldset>
    <fieldset>
        @include('Home.steps.step-4')
    </fieldset>
    <fieldset>
        @include('Home.steps.step-5')
    </fieldset>
    <fieldset>
        @include('Home.steps.step-6')
    </fieldset>
</form>

js

$(document).ready(function (e) {
    $('.btn-next').on('click',(function(e) {
        e.preventDefault();
        var formData = new FormData(this);

        $.ajax({
            type:'POST',
            url: $(this).attr("{{ route('update', auth()->id()) }}"),
            data:formData,
            cache:false,
            contentType: false,
            processData: false,
            success:function(data){
                console.info("success");
                console.info(data);
            },
            error: function(data){
                console.info("error");
                console.info(data);
            }
        });
    }));
});

Я получаю эту ошибку в консоли.

Uncaught TypeError: конструктор FormData: аргумент 1 не реализует интерфейс HTMLFormElement.