Как сохранять изображения по ajax?

Пытаюсь отправлять выбранные изображения через ajax, но в request отсутствует выбранное изображение.

routes/web.php

Route::post('/cars/images', 'CarController@carImages')->name('cars.images');

controller

public function carImages(Request $request){
    if(isset($request->src)){
        return response()->json([
            'status' => 'saved',
            'src' => $request->src
        ]);
    }elseif(isset($request->image)){
        return response()->json([
            'status' => 'new image saved',
            'src' => $request->image
        ]);
    }

    return response([
        'status' => 'default',
        'request' => $request
    ]);
}

view

<div class="modal fade" id="loadImage" tabindex="-1" role="dialog" data-url="{{ route('cars.images') }}" aria-labelledby="{{__('Load Image')}}" aria-hidden="true">
<div class="modal-body">
    <div class="row">
        @foreach($images as $image)
            <div class="col-md-3">
                <span class="image-span"><img src="/images/{{ $image }}" alt=""></span>
            </div>
        @endforeach
    </div>
</div>
<label class="btn btn-primary js-download-image">
    <input type="file" name="image" style="display:none" class="btn btn-primary">{{ __('Download') }}
</label>
</div>

js

    //загрузка нового изображения
    $('.js-download-image').find('input').on('change', function(e){
        if (!$(e.target)[0].files.length) { return }
        var image = $(e.target)[0].files[0];
        console.log(image);
        var url = $loadImage.data('url');
        $.ajax({
            method: 'post',
            url: url,
            data: {
                image: image
            },
            // dataType: 'json',
            cache: false,
            contentType: false,
            processData: false,
            success: function(res){
                console.log(res);

            },
        });
    });

в результате если через input type=file загрузить новое изображение, то возвращается статус default из контроллера и не получается сохранить изображение.

И подскажите ещё пожалуйста, допустим если есть список изображений, код в вышеприведённом view, и кликнув по изображению выбирается атрибут src и отправляется по ajax.
Как в данном случае нужно сохранять изображение, имея только src выбранного изображения? к примеру нужно привязать данное изображение к записи.

    //выбор изображения из списка в модальном окне
    $(document).on('click', '.image-span', function(e){
        var $target = $(e.target).closest('img');
        var src = $target.attr('src').match(/\/images\/(.*)/i);
        src = src[1]? src[1] : null;
        if(!src){ return}

        var url = $loadImage.data('url');
        $.ajax({
            method: 'post',
            url: url,
            data: {
                src: src
            },
            // contentType: false,
            // processData: false,
            success: function(res){
                console.log(res);

            },
        });
    });

P.S.
изображения изначально выбираются с помощью File

$files = collect(File::allFiles(public_path('/images')) );
...
return view('view', ['images' => $files]);

Ответы (0 шт):