When i am trying to send form input data with image to an api i am getting axios error “Required part ‘company’ is not present.”
Is there anything wrong with my code?
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import axios from "axios";
const AddCompany = () => {
const [logo, setLogo] = useState(null);
const [name, setName] = useState("");
const [company, setCompany] = useState({
websiteUrl: "",
firstName: "",
lastName: "",
email: "",
phone: "",
});
const navigate = useNavigate();
const handleSubmit = async (e) => {
e.preventDefault();
const formData = new FormData();
formData.append("logo", logo);
formData.append("name", name);
formData.append("websiteUrl", company.websiteUrl);
formData.append("firstName", company.firstName);
formData.append("lastName", company.lastName);
formData.append("email", company.email);
formData.append("phone", company.phone);
try {
const response = await axios.post(
"http://localhost:8080/api/v1/company/create/company",
formData,
{
headers: { "Content-Type": "multipart/form-data" },
}
);
console.log(response.data);
navigate("/company");
} catch (error) {
console.log(error);
}
};
// Input Style ClassNames
const inputClassName =
"bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500";
// label Class Names
const labelClassNames =
"block mb-2 text-sm font-medium text-gray-900 dark:text-white";
return (
<>
{/* Form Section */}
<form onSubmit={handleSubmit} encType="multipart/form-data">
{/* Logo Section */}
<div className="mb-5">
<label className={labelClassNames} htmlFor="logo">
Upload logo
<span className=" text-blue-600"> (optional)</span>
</label>
<input
className="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
aria-describedby="file_input_help"
type="file"
onChange={(e) => setLogo(e.target.files[0])}
/>
<p
className="mt-1 text-sm text-gray-500 dark:text-gray-300"
id="file_input_help"
>
SVG, PNG, JPG or GIF (MAX. 800x400px).
</p>
</div>
<div className="grid gap-6 mb-6 md:grid-cols-2">
<div>
<label htmlFor="phone" className={labelClassNames}>
Company Name
<span className=" text-red-600"> (required)</span>
</label>
<input
type="text"
maxLength={150}
value={name}
className={inputClassName}
placeholder="Company Name"
onChange={(e) => setName(e.target.value)}
// required
/>
</div>
<div>
<label htmlFor="phone" className={labelClassNames}>
Website URL
<span className=" text-blue-600"> (optional)</span>
</label>
<input
type="text"
maxLength={100}
value={company.websiteUrl}
className={inputClassName}
placeholder="www.url.com"
onChange={(e) =>
setCompany({ ...company, websiteUrl: e.target.value })
}
// required
/>
</div>
<div>
<label htmlFor="first_name" className={labelClassNames}>
Contact Person First Name
<span className=" text-red-600"> (required)</span>
</label>
<input
type="text"
value={company.firstName}
maxLength={50}
className={inputClassName}
placeholder="First name"
onChange={(e) =>
setCompany({ ...company, firstName: e.target.value })
}
// required
/>
</div>
<div>
<label htmlFor="last_name" className={labelClassNames}>
Contact Person Last Name
<span className=" text-red-600"> (required)</span>
</label>
<input
type="text"
value={company.lastName}
maxLength={50}
className={inputClassName}
placeholder="Last name"
onChange={(e) =>
setCompany({ ...company, lastName: e.target.value })
}
// required
/>
</div>
<div className="mb-6">
<label htmlFor="email" className={labelClassNames}>
Email address
<span className=" text-red-600"> (required)</span>
</label>
<input
type="email"
value={company.email}
maxLength={100}
className={inputClassName}
placeholder="[email protected]"
onChange={(e) =>
setCompany({ ...company, email: e.target.value })
}
// required
/>
</div>
<div className="mb-6">
<label htmlFor="password" className={labelClassNames}>
Phone No
<span className=" text-blue-600"> (optional)</span>
</label>
<input
type="tel"
value={company.phone}
maxLength={50}
className={inputClassName}
placeholder="+1 123-456-789"
onChange={(e) =>
setCompany({ ...company, phone: e.target.value })
}
// required
/>
</div>
</div>
<div className="flex justify-center">
<button
type="submit"
className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-0 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-60 px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Submit
</button>
</div>
</form>
</>
);
};
export default AddCompany;
My requirement is i have to send form data in key and value pair like one key and value for logo and another key and value for name and another key and value pair for comapany such as websiteurl,firstname, lastName , email and phone.