I am using axios.post method to send the data to the server. i make the larvel api. When i check that api in postman, it was working fine. but when i connect that api in frontend it send all data to the backend except my image file. below i mention the code that send the image file to the server. Please check carefully my code and help me out where i am doing wrong. I stuck in this problem since two days.
frontEnd code
const params = useParams();
const { some } = params;
const [name, setName] = useState("");
const [school, setSchool] = useState("");
const [author, setAuthor] = useState("");
const [grade, setGrade] = useState("");
const [Extra, setExtra] = useState("");
const [image, setImage] = useState("");
if (some === "book") {
const handleSubmit = async (e) => {
e.preventDefault();
const formData = new FormData();
formData.append("image", image);
if (image == null) return image;
console.log(image, name)
const token = localStorage.getItem("Token")
console.log(token)
try {
const res = await axios.post(
`http://127.0.0.1:8000/add-product`,
{
formData,
product_name: name,
product_auther: author,
school_name: school,
class: grade,
product_image: image,
category_id: "17"
},
{
headers:
{ "Authorization": `Bearer ${token}` },
'Content-Type': 'multipart/form-data' ,
}
).then((res) => {
console.log("usman ", res)
});
console.log()
} catch (error) {
if (error.request) {
console.log(error.response);
} else if (error.request) {
console.log("network error");
} else {
console.log("CBM", { error });
}
}
}
return (
<div className="container " style=>
<br>
</br>
<form onSubmit={handleSubmit} >
<div className="mb-3">
<label htmlFor="exampleInputEmail1" className="form-label"> Name</label>
<input type="text" value={name} onChange={(e) => setName(e.target.value)} className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />
</div>
<div className="mb-3">
<label htmlFor="exampleInputPassword1" className="form-label">Author</label>
<input type="text" value={author} onChange={(e) => setAuthor(e.target.value)} className="form-control" id="exampleInputPassword1" />
</div>
<div className="mb-3">
<label htmlFor="exampleInputPassword1" className="form-label">image</label>
<input type="file" onChange={(e) => setImage(e.target.files[0])} className="form-control" id="exampleInputPassword1" />
</div>
<div className="mb-3">
<label htmlFor="exampleInputPassword1" className="form-label">School Name</label>
<input type="text" value={school} onChange={(e) => setSchool(e.target.value)} className="form-control" id="exampleInputPassword1" />
</div>
<div className="mb-3">
<label htmlFor="exampleInputPassword1" className="form-label">Grade(Class)</label>
<input type="text" value={grade} onChange={(e) => setGrade(e.target.value)} className="form-control" id="exampleInputPassword1" />
</div>
<div className="mb-3">
<label htmlFor="exampleInputPassword1" className="form-label">Any Extra Information</label>
<input type="text" value={Extra} onChange={(e) => setExtra(e.target.value)} className="form-control" id="exampleInputPassword1" />
</div>
<button type="submit " className="btn btn-primary d-flex mx-auto" style=>Submit</button>
</form>
</div>
)
}
Laravel APIpublic function store(Request $request){ $product = new product; $product->category_id = $request->category_id; $product->product_name = $request->product_name; $product->product_image = $request->file('image')->store('p_imges'); $product->product_quantity = $request->product_quantity; $product->product_price = $request->product_price; $product->product_auther = $request->product_auther; $product->class = $request->class; $product->school_name = $request->school_name; $product->gender = $request->gender; $product->F_xyz = $request->F_xyz; $product->size = $request->size; $product->xtra_info = $request->xtra_info; $product->doner_id = Auth::id(); $product->save(); $product = ["Product Successfully Added"]; return $product; }Error This error occur
via Chebli Mohamed
