Thumbnail must be an image: ajax

Hi there ,

I trying to autosave my project form with ajax/jquery but i have this error in console

responseText: "{"message":"The given data was invalid.","errors":{"thumbnail":["The thumbnail must be an image.","The thumbnail must be a file of type: jpg, jpeg, png."]}}"

my image is in jpg or png or jpeg when it is upload.

I did this code

    autoSave: function () {
        var project_title = $('input[name=title]').val();
        var project_category = $('input[name=category]:checked').val();
        var project_difficulty = $('input[name=difficulty]:checked').val();
        var project_thumbnail = $('input[name=thumbnail]').val();

        console.log(project_thumbnail);

        var project_material = [];
        $('input[name^=material]').each(function () {
            // console.log($(this).val());
            project_material.push($(this).val());
        });

        var project_duration = $('input[name=duration]').val();

        var project_unity_of_measurement = $('select[name=unity_of_measurement] option').filter(':selected').val();
        var project_budget = $('input[name=budget]').val();
        var project_content = $('#summernote_create').summernote('code');


        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            method: 'POST',
            url: "/projets/",
            data: {
                title: project_title,
                category: project_category,
                difficulty: project_difficulty,
                thumbnail: project_thumbnail,
                material: project_material,
                duration: project_duration,
                unity_of_measurement: project_unity_of_measurement,
                budget: project_budget,
                content: project_content
            },
            dataType: "json",
            success: function (data) {

                console.log(data);

                if (data != '') {
                    $('#create_project_id').val(data);
                }
                $('#auto_save').text('saved');
                setInterval(function () {
                    $('#auto_save').text('');

                }, 2000);
            },
            error: function (data, textStatus, errorThrown) {
                console.log(data);

                console.error(textStatus + " " + errorThrown);
            }
        });

        // console.log(content);
    },

my html

<form action="{{route('projets.store')}}" method="post" enctype="multipart/form-data">
            @csrf
....
<div class="box__thumbnail--field">
                <label for="thumbnail" class="box__label box__label--title label">Choisissez une image thumbnail</label>
                <label class="box__label box__label--image box__label--thumbnail box__label--thumbnail--create label" for="thumbnail">
                </label>
                <div class="box__box-input control">
                    <input class="box__input box__input--file input" type="file" id="thumbnail" name="thumbnail">
                </div>
            </div>
            @error('thumbnail')
            <p class="help is-danger">{{ $message }}</p>
            @enderror

...
</form>

my project controller

$request->validate([
                'title'                 => 'required|string|min:6|max:80|unique:projects,title',
                'thumbnail'             => 'required|image|mimes:jpg,jpeg,png|max:3000',
                'category'              => 'required|exists:categories,id',
                'difficulty'            => 'required|exists:difficulty_levels,id',
                'material'              => 'required|array|min:1',
                'material.*'            => 'distinct|nullable|string',
                'material.0'            => 'required|string|min:3',
                'duration'              => 'required|digits_between:1,24',
                'unity_of_measurement'  => 'required|exists:unities_of_measurement,id',
                'budget'                => 'required|digits_between:1,1000',
                'content'               => 'required|min:100'
            ]);

Do you have a solution for that please ? Thank you in advance. See you + .