I use Laravel, Inertia and Vue.
When I submitted the form, the page returned a 404 not found window and the console said
POST http://127.0.0.1:8000/admin/sparepart 404 (Not Found)
I don't know if it's because of an error in the route or if the form wasn't sent correctly to the backend.
This is from the network header tabs:
Request URL:
http://127.0.0.1:8000/admin/sparepart
Request Method:
POST
Status Code:
404 Not Found
Remote Address:
127.0.0.1:8000
Referrer Policy:
strict-origin-when-cross-origin
In the payload, it seems the formData does exist:
nama_sparepart: as
harga: 2
stok: 2
kategori_id: 1
image: (binary)
I'm using Route::resource
Route::resource('/admin/sparepart', SparepartController::class);
and yeah it does exist when I use route::list
GET|HEAD admin/sparepart ....................................... sparepart.index › SparepartController@index POST admin/sparepart ....................................... sparepart.store › SparepartController@store
controller:
public function store(Request $request){
$request->validate([
'nama_sparepart' => 'required|string|max: 25',
'harga' => 'required|number',
'stok' => 'required|number',
'image' => 'required|image',
'kategori_id' => 'required',
]);
$image = $request->file('image');
$image->storeAs('public/spareparts', $image->hashname());
$sparepart = Sparepart::create([
'nama_sparepart' => $request->nama_sparepart,
'harga' => $request->harga,
'stok' => $request->stok,
'image' => $image->hashName(),
'kategori_id' => $request->kategori_id,
]);
if($sparepart){
return Redirect::route('sparepart.index')->with('message', 'success');
}
Vue scripts
<script setup>
import { reactive } from 'vue'
import { Inertia } from '@inertiajs/inertia'
//props
defineProps({
errors: Object,
kategori: Array
})
//state posts
const sparepart = reactive({
nama_sparepart : '',
harga : '',
stok : '',
image : null,
kategori_id : ''
})
function handleImageUpload(event) {
const file = event.target.files[0]
console.log("File yang dipilih:", file);
if (file) {
sparepart.image = file // Simpan file ke state
}
}
//function storePost
function storePost() {
console.log("State sebelum dikirim:", sparepart);
const formData = new FormData()
formData.append('nama_sparepart', sparepart.nama_sparepart)
formData.append('harga', sparepart.harga)
formData.append('stok', sparepart.stok)
formData.append('kategori_id', sparepart.kategori_id)
if (sparepart.image) {
formData.append('image', sparepart.image) // Sertakan file gambar
}
// Debugging FormData
for (let [key, value] of formData.entries()) {
console.log(key + ': ' + value);
}
// Kirim data dengan FormData
Inertia.post('/admin/sparepart', formData)
}
</script>
Vue page:
<template>
<div>
<div class="card border-0 rounded shadow">
<div class="card-body">
<h4>TAMBAH POST</h4>
<hr>
<form @submit.prevent="storePost" enctype="multipart/form-data">
<div>
<label for="image">Gambar</label>
<input type="file" id="image" @change="handleImageUpload" accept="image/*" />
<span v-if="errors.image">{{ errors.image }}</span>
</div>
<div class="mb-3">
<label class="form-label">Nama Sparepart</label>
<input type="text" class="form-control" v-model="sparepart.nama_sparepart" placeholder="Masukkan Title Post">
<div v-if="errors.nama_sparepart" class="mt-2 alert alert-danger">
{{ errors.nama_sparepart }}
</div>
</div>
<div class="mb-3">
<label class="form-label">Harga</label>
<input type="number" class="form-control" v-model="sparepart.harga" placeholder="Masukkan Title Post">
<div v-if="errors.harga" class="mt-2 alert alert-danger">
{{ errors.harga }}
</div>
</div>
<div class="mb-3">
<label class="form-label">Stok</label>
<input type="number" class="form-control" v-model="sparepart.stok" placeholder="Masukkan Title Post">
<div v-if="errors.stok" class="mt-2 alert alert-danger">
{{ errors.stok }}
</div>
</div>
<div>
<label for="kategori_id">Kategori</label>
<select v-model="sparepart.kategori_id" id="kategori_id">
<option value="">Pilih Kategori</option>
<option v-for="k in kategori" :key="k.id" :value="k.id">{{ k.nama_kategori }}</option>
</select>
<span v-if="errors.kategori_id">{{ errors.kategori_id }}</span>
</div>
<!-- Tombol Submit -->
<button type="submit">Submit</button>
</form>
</div>
</div>
</div>
</template>
I tried to do a manual route(like Route::post('url',[controller class])), but I still get a 404.
i changed the routes from
Route::middleware('admin')->group(function () {
Route::get('/admin/dashboard', [AdminController::class, 'dashboard'])->name('admin.dashboard');
Route::get('/admin/admin-control', [AdminController::class, 'showAdmin'])->name('admin.show');
Route::get('/admin/create', [AdminController::class, 'addAdmin'])->name('admin.create');
Route::post('/admin/create', [AdminController::class, 'store'])->name('admin.createSubmit');
Route::get('/admin/{id}/edit', [AdminController::class, 'edit'])->name('admin.edit');
Route::post('/admin/edit', [AdminController::class, 'update'])->name('admin.update');
Route::post('/admin/{id}', [AdminController::class, 'destroy'])->name('admin.delete');
/*-------------Sparepart-------------- */
Route::resource('/admin/sparepart', SparepartController::class);
/*-----------End sparepart-------------- */
}); to
Route::middleware('admin')->group(function () {
Route::resource('/admin/sparepart', SparepartController::class);
Route::get('/admin/dashboard', [AdminController::class, 'dashboard'])->name('admin.dashboard');
Route::get('/admin/admin-control', [AdminController::class, 'showAdmin'])->name('admin.show');
Route::get('/admin/create', [AdminController::class, 'addAdmin'])->name('admin.create');
Route::post('/admin/create', [AdminController::class, 'store'])->name('admin.createSubmit');
Route::get('/admin/{id}/edit', [AdminController::class, 'edit'])->name('admin.edit');
Route::post('/admin/edit', [AdminController::class, 'update'])->name('admin.update');
Route::post('/admin/{id}', [AdminController::class, 'destroy'])->name('admin.delete');
});