Controller
Here I delete the old image then add a new image, I have followed the lines of code on the internet but I feel something is wrong
public function update(Request $request, Article $article)
{
$request->validate([
"title" => "required|string|max:255",
"body" => "required",
"category_id" => "required",
"is_active" => "required",
]);
if ($request->file("image") == "") {
$article->update([
"title" => $request->title,
"slug" => Str::slug($request->title),
"body" => $request->body,
"category_id" => $request->category_id,
"user_id" => Auth::id(),
"is_active" => $request->is_active,
"views" => 0,
]);
} else {
Storage::disk("local")->delete("public/article/" . $article->image);
$image = $request->file("image");
$image->storeAs("public/article", $image->hashName());
$article->update([
"title" => $request->title,
"slug" => Str::slug($request->title),
"body" => $request->body,
"category_id" => $request->category_id,
"user_id" => Auth::id(),
"image" => $image->hashName(),
"is_active" => $request->is_active,
"views" => 0,
]);
}
return redirect(route("article.index"))->with("success", "Data Updated Successfully");
}
Views
I modified this line of code from Laravel's bootcamp page. Previously I had made a simple crud without images and it worked
import React from "react";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import InputError from "@/Components/InputError";
import PrimaryButton from "@/Components/PrimaryButton";
import { useForm, Head } from "@inertiajs/inertia-react";
export default function Edit({ auth, categories, article }) {
const { data, setData, put, processing, reset, errors } = useForm({
title: article.title,
body: article.body,
category_id: article.category_id,
image: null,
is_active: article.is_active,
});
const submit = (e) => {
e.preventDefault();
put(route("article.update", article.id)), { onSuccess: () => reset() };
};
return (
<AuthenticatedLayout
auth={auth}
header={
<h2 className="font-semibold text-xl text-gray-800 leading-tight">
Article Edit: {article.title}
</h2>
}
>
<Head title="Article Edit" />
<div className="px-20 py-10">
<form onSubmit={submit}>
<label htmlFor="" className="font-semibold text-lg">
Title
</label>
<input
name="title"
type="text"
value={data.title}
className="px-3 py-1 mt-1 mb-5 block w-full border-gray-300 focus:border-slate-900 focus:ring-slate-900 rounded-md shadow-sm"
onChange={(e) => setData("title", e.target.value)}
/>
<label htmlFor="" className="font-semibold text-lg">
Body
</label>
<textarea
name="body"
id=""
rows="10"
className="block mt-1 mb-5 rounded-md shadow-sm border-gray-300 focus:border-slate-900 focus:ring-slate-900 w-full"
value={data.body}
onChange={(e) => setData("body", e.target.value)}
></textarea>
<label htmlFor="" className="font-semibold text-lg">
Category
</label>
<select
name="category_id"
id=""
className="block mt-1 mb-5 rounded-md shadow-sm border-gray-300 focus:border-slate-900 focus:ring-slate-900 w-full"
onChange={(e) => setData("category_id", e.target.value)}
>
{categories.map((category) =>
category.id == article.category_id ? (
<option value={category.id} selected>
{category.category_name}
</option>
) : (
<option value={category.id}>
{category.category_name}
</option>
)
)}
</select>
<label htmlFor="" className="font-semibold text-lg">
Image
</label>
<input
onChange={(e) => setData("image", e.target.files[0])}
type="file"
name=""
id=""
className="block mt-1 mb-1 w-full text-sm text-slate-500
file:mr-4 file:py-2 file:px-4
file:rounded-md file:border-0
file:text-sm file:font-semibold
file:bg-gray-500 file:text-slate-50 file:cursor-pointer
"
/>
<img
src={"/storage/article/" article.image}
alt=""
className="w-52 mb-5"
/>
<label htmlFor="" className="font-semibold text-lg">
Status
</label>
<select
name="is_active"
id=""
className="block mt-1 mb-5 rounded-md shadow-sm border-gray-300 focus:border-slate-900 focus:ring-slate-900 w-full"
onChange={(e) => setData("is_active", e.target.value)}
>
{article.is_active == 1 ? (
<>
<option value={1} selected>
Publish
</option>
<option value={2}>Draf</option>
</>
) : (
<>
<option value={1}>Publish</option>
<option value={2} selected>
Draf
</option>
</>
)}
</select>
<InputError message={errors.title} className="mt-2" />
<InputError message={errors.body} className="mt-2" />
<InputError message={errors.category_id} className="mt-2" />
<InputError message={errors.image} className="mt-2" />
<InputError message={errors.is_active} className="mt-2" />
<PrimaryButton className="mt-4" processing={processing}>
Save
</PrimaryButton>
</form>
</div>
</AuthenticatedLayout>
);
}
if i include a image
if I don't include a image
CodePudding user response：
According to Inertia Docs
Uploading files using a multipart/form-data request is not natively supported in some languages for the put,patch or delete methods. The workaround here is to simply upload files using post instead.
So instead of using put() when sending an update you can use the post() then add the a new attribute that contains the appropriate request method.
Inertia.post(route('article.update', article.id), {
_method: 'put',
// your other attributes here
})