Why is it not uploading files to the server?

Question

AJAX

Tell me, please, what are the problems and for what reason there is no download of files

Here is the controller itself

public function loading(Request $request)
    {
        $validation = Validator::make($request->all(), [
            'select_file' => 'image|mimes:jpeg,png,jpg,gif|max:2048'
        ]);
        if($validation->passes())
        {
            $image = $request->file('select_file');
            $new_name = rand() . '.' . $image->getClientOriginalExtension();
            $image->move(public_path('images'), $new_name);
            return response()->json([
                'message'   => 'Image Upload Successfully',
                'uploaded_image' => '<img src="/images/'.$new_name.'" class="img-thumbnail" width="300" />',
                'class_name'  => 'alert-success'
            ]);
        }
        else
        {
            return response()->json([
                'message'   => $validation->errors()->all(),
                'uploaded_image' => '',
                'class_name'  => 'alert-danger'
            ]);
        }
    }

Thus requests are sent to it

if(document.getElementById('product')) {
        const formProduct = document.getElementById('product'),
            addProduct = document.getElementById('add-product'),
            createProduct = document.getElementById('create-product'),
            error = document.getElementById('product-error'),
            table = document.getElementById('table-restaurant-cols'),
            action = formProduct.getAttribute('action'),
            destroy = formProduct.dataset.destroy,
            loading = formProduct.dataset.loading

        addProduct.addEventListener('click', function (event) {
            event.preventDefault()

            const name = document.getElementById('name-input').value,
                restaurantName = document.getElementById('restaurant-select').value,
                price = document.getElementById('price').value,
                description = document.getElementById('description').value,

            console.log(new FormData(formProduct))

            $.ajax({
                url: loading,
                method:"POST",
                data: new FormData(formProduct),
                dataType:'JSON',
                contentType: false,
                cache: false,
                processData: false,
                success: function(data){

                }
            })

            success(error)
            return false
        })
    }

As a result, when sending requests, input still passes emptiness and such a problem "Call to a member function getClientOriginalExtension() on null"

The form itself

<form action="{{ route('product-create') }}"
                  data-loading="{{ route('product-loading') }}"
                  data-destroy="{{ route('product-destroy') }}"
                  id="product"
                  class="row"
                  method="post"
                  enctype="multipart/form-data"
                  name="product-form">
                {{ csrf_field() }}
                @csrf
                <div class="form-group col-12">
                    <input type="text" class="form-control input-lg" name="name" id="name-input" placeholder="Название">
                </div>
                <div class="form-group col-12">
                    <div data-select2-id="20">
                        <select name="restaurant" id="restaurant-select" class="form-control select-lg select2 select2-hidden-accessible" data-select2-id="1" tabindex="-1" aria-hidden="true">
                            @foreach($restaurant as $el)
                                <option value="{{ $el->name }}" data-city="{{ $el->city }}">{{ $el->name }} - {{ $el->city }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="form-group col-12">
                    <div class="input-group file-browser">
                        <input type="text" class="form-control border-right-0 browse-file" id="icon-link" placeholder="Ссылка" readonly="" style="background-color: #fff; height: 46px;">
                        <label class="input-group-btn">
                            <span class="btn btn-primary" style="display: flex; align-items: center; height: 46px;"> Загрузить изображение <input type="file" name="icon" id="icon" style="display: none;" multiple=""> </span>
                        </label>
                    </div>
                </div>
                <div class="form-group col-12">
                    <input type="text" class="form-control input-lg" name="name" id="price" placeholder="Стоимость">
                </div>
                <div class="form-group col-12">
                    <textarea class="form-control" id="description" placeholder="Описание" rows="5"></textarea>
                </div>
                <div class="col-12 row">
                    <div class="col-3 pt-4 pb-12">
                        <button type="submit" class="btn ripple btn-light" id="add-product">Добавить</button>
                    </div>
                    <div class="col-3 pt-4 pb-12">
                        <button type="submit" class="btn ripple btn-main-primary" id="create-product">Сохранить</button>
                    </div>
                </div>
                <div class="col-12 pt-4 pb-12">
                    <p id="product-error"></p>
                </div>
            </form>

Answer 1

name="icon"!=name="select_file"