MethodNotAllowedHttpException error in Laravel 5.7 using ajax [duplicate] - php

Question

This question already has answers here:
Stop form refreshing page on submit
(20 answers)
How can I prevent refresh of page when button inside form is clicked?
(16 answers)
Closed 4 years ago.
Im trying to insert data with ajax, but i got error :
Symfony \ Component \ HttpKernel \ Exception \
MethodNotAllowedHttpException
This is my form in add-gallery.blade.php:
<form method="post" action="" enctype="multipart/form-data" autocomplete="off" class="mt-4 mb-4 card p-4">
<div class="form-group">
<div class="row">
<div class="col-md-2 align-self-center">
<label for="gallery_name">Name</label>
</div>
<div class="col-md-6 align-self-center">
<input type="text" name="gallery_name" id="gallery_name" class="form-control" placeholder="Type Gallery Name" />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-2 align-self-center">
<label for="category">Category</label>
</div>
<div class="col-md-3 align-self-center">
<select class="form-control custom-select" name="category" id="category">
<option value="">Select Category</option>
<option value="Home">Home</option>
<option value="Office">Office</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-2 align-self-center">
<label for="subcategory">Sub Category</label>
</div>
<div class="col-md-3 align-self-center">
<select class="form-control custom-select" name="subcategory" id="subcategory">
<option value="">Select Sub Category</option>
<option value="Interior">Interior</option>
<option value="Eksterior">Eksterior</option>
<option value="Decoration">Decoration</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-2 align-self-center">
<label for="subsubcategory">Subsub Category</label>
</div>
<div class="col-md-3 align-self-center">
<select class="form-control custom-select" name="subsubcategory" id="subsubcategory">
<option value="">Select Subsub Category</option>
<option value="Room">Room</option>
<option value="Bathroom">Bathroom</option>
<option value="Kitchen">Kitchen</option>
<option value="Terrace">Terrace</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-2">
<label for="gallery_image">Image</label>
</div>
<div class="col-md-10">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail w-100" style="display: none;">
<img src="http://placehold.it/1186x800" />
</div>
<div id="toAnnotate" class="fileinput-preview fileinput-exists thumbnail w-100"></div>
<div>
<span class="btn btn-xs btn-success btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file" name="gallery_image" id="gallery_image"></span>
Remove
</div>
</div>
<p><small><em>Image Size : 1186px (width), 800px (height)</em></small></p>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-2 align-self-center"> </div>
<div class="col-md-10 align-self-center">
<button type="button" class="btn btn-secondary">Cancel</button>
<button type="submit" class="btn btn-success" id="save">Save</button>
</div>
</div>
</div>
</form>
And below is my ajax in same page add-gallery.blade.php:
<script type="text/javascript">
$(document).ready(function (e) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
//Save
$('#save').on('click', function () {
var gallery_name = $('#gallery_name').val();
var category = $('#category').val();
var subcategory = $('#subcategory').val();
var subsubcategory = $('#subsubcategory').val();
var gallery_image = $('#gallery_image').val();
var dataSubmit = $(this).serialize();
var top = top;
var left = left;
var file_data = $('#gallery_image').prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);
$.ajax({
url : "{{ url('galleries/store') }}",
dataType : 'text', // what to expect back from the server
cache : false,
contentType : false,
processData : false,
data : form_data,
type : 'post',
dataType : 'json',
success: function (response) {
console.log(response);
},
error: function (response) {
console.log(response);
}
});
});
});
</script>
This is my routes file web.php:
Route::post('galleries/store','Dashboard\GalleryController#store');
And this is my controller GalleryController.php:
public function store(Request $request){
if($request->hasFile('gallery_image')){
$fileImage = $request->file('gallery_image');
$fileImageExtension = $fileImage->extension();
$renameFileImage = 'ImageGalleries'.time().'.'.$fileImageExtension;
$pathFileImage = $fileImage->storeAs('public/galleries_documents/images_galleries', $renameFileImage); /images_articles
$galleries = new Gallery;
$points = new Point;
$galleries->name = $request->gallery_name;
$galleries->category = $request->category;
$galleries->sub_category = $request->subcategory;
$galleries->sub_subcategory = $request->subsubcategory;
$galleries->image = $renameFileImage;
$galleries->lang_id = session('lang_id');
$galleries->save();
$lastInsertId = $galleries->id;
for($i = 0; $i < count($request->node); $i++) {
$node[] = [
'node_position_top' => $request->node[$i],
'node_position_left' => $request->node[$i],
'id_gallery' => $lastInsertId,
];
$points->lang_id = session('lang_id');
}
Point::insert($node); //save to table
print_r($node[]);
exit();
}
}