Как сохранять изображения по 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]);