<script setup>
import {ref} from 'vue';
import {useForm} from '@inertiajs/inertia-vue3';
const props = defineProps({
categories: Array,
});
const form = useForm({
category_id: null,
title: null,
image: null,
content: null,
});
const imageInput = ref(null);
const submit = () => {
if (imageInput.value) {
form.image = imageInput.value.files[0];
}
form.post(route('rota adın'), {
preserveScroll: true,
});
};
</script>
<template>
<div>
<form @submit.prevent="submit">
<select id="category_id" v-model="form.category_id">
<option v-for="category in categories" :value="category.id">{{ category.name }}</option>
</select>
<input type="text" id="title" v-model="form.title">
<input type="file" id="image" ref="imageInput">
<textarea id="content" v-model="form.content"></textarea>
<button type="submit">Kaydet</button>
</form>
</div>
</template>
vue tarafını üstteki gibi
controller tarafınıda alttaki gibi uygularmısınız
public function store(Request $request)
{
$request->validate(
[
'category_id' => ['required','integer','exists:categories,id'],
'title' => 'required',
'slug' => 'unique:articles',
'image' => 'nullable|mimes:jpg,jpeg,png,webp,gif,bmp',
],
[
'title.required' => 'Başlık kısmı boş bırakılamaz.',
'slug.unique' => 'Slug kullanılıyor.',
'image.mimes' => 'Geçersiz dosya uzantısı! Sadece (jpg,jpeg,png,webp,gif,bmp) geçerlidir.',
'category_id.required' => 'Kategori seçimi yapmadınız.',
'category_id.integer' => 'Kategori geçersiz.',
'category_id.exists' => 'Kategori geçersiz.',
]
);
$article = new Article;
$article->category_id = $request->input('category_id');
$article->title = $request->input('title');
$article->content = $request->input('content');;
$article->slug = Str::slug($article->title);
if ($request->hasfile('image')) {
$file = $request->file('image');
$image = Storage::putFile('articles/', new File($file->getRealPath()));
$article->image = $image;
}
$article->save();
return redirect()->route('articles.index');
}