I am struggling to save my image data using XMLHttpRequest. Although I can send json data and see them in the developer console, I am unable to access them on the server side as the $request appears to be null.
Below are snippets of my JavaScript code:
document.querySelectorAll('.galeri-cart').forEach(function (image) {
image.addEventListener('click',function () {
// update stuff
document.getElementById('submit_button').addEventListener('click',function () {
let xhr = new XMLHttpRequest(),
token = document.head.querySelector("[name=csrf-token]").content;
xhr.open('PUT','images/update/'+id,false);
xhr.setRequestHeader('X-CSRF-TOKEN',token);
xhr.onload = function () {
swal("Updated successfully", {
icon: "success",
});
};
let data = {};
data.alt = altInput.value;
data.url = urlInput.value;
xhr.send(JSON.stringify(data))
})
})
});
And here is a snippet from my controller:
public function updateMedia(Request $request, $id) {
$image = Media::find($id);
$image->image_alt_name = $request->input('alt');
$image->image_path = $request->input('url');
$image->save();
return json_endcode($request);
}
This is how the route looks like (under the images prefix):
Route::put('update/{id}',['as'=>'media.update','uses'=>'MediaController@updateMedia']);
Can you provide any advice or point out what might be going wrong? I appreciate your help.