Почему не загружает файлы на сервер?

Question

[Denis]

Подскажите, пожалуйста, в чем проблем и по какой причине не происходит загрука файлов

Вот сам контроллер

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'
            ]);
        }
    }

Таким образом отправляются запросы к нему

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
        })
    }

По итогу при отправке запросы input все равно передает пустоту и такую вот проблему "Call to a member function getClientOriginalExtension() on null"

Сама форма

<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"

Comments

[Denis]

Если я правильно понял вас, то я заменил в контролере select_file на icon, название input fill, но проблема все равно осталась та же

[Алексей Уколов]

я заменил в контролере select_file на icon, название input fill

Что? Код покажите.

[Denis]

Вот так теперь выглядит контроллер

public function loading(Request $request)
    {
        $validation = Validator::make($request->all(), [
            'icon' => 'image|mimes:jpeg,png,jpg,gif|max:2048'
        ]);
        if($validation->passes())
        {
            $image = $request->file('icon');
            $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'
            ]);
        }
    }