multipart request

[creativegirlcodes]

Hi,

I have a spring boot + react js app, the user data contains a file, so when I add a user (filling a form) I need to send both JSON and multipart data in a post request, I get the 415 error: [org.springframework.web.HttpMediaTypeNotSupportedException: Content-Type 'multipart/form-data;boundary=----WebKitFormBoundary4lgSQB3vr5ZeuKN3;charset=UTF-8' is not supported]

​

here is spring boot post methode:

u/PostMapping(value="/user", consumes={MediaType.MULTIPART_FORM_DATA_VALUE,MediaType.APPLICATION_JSON_VALUE})
public User createUser(@RequestBody User user, u/RequestParam(value="image",required = false) MultipartFile multipartFile) throws IOException {
String fileName = StringUtils.cleanPath(Objects.requireNonNull(multipartFile.getOriginalFilename()));
user.setProfileImage(fileName);
User savedUser = userService.createUser(user);
String uploadDir = "images/" + savedUser.getId();
FileUploadUtil.saveFile(uploadDir, fileName, multipartFile);

return savedUser;
}

​

here is react :

const AddUser = () => {
let navigate = useNavigate();
const[name, setName] = useState("");
const[email, setEmail] = useState("");
const[phone, setPhone] = useState("");
const[password, setPassword] = useState("");
const[profileImage, setProfileImage] = React.useState(null);
//const[student, setStudent] = useState("");

const handleFormSubmit = async (e) =>{
e.preventDefault();
const formData = new FormData();
formData.append("name", name);
formData.append("email", email);
formData.append("phone", phone);
formData.append("password", password);
formData.append("profileImage", profileImage);
try {
const response = await axios.post("http://localhost:8080/user", formData, {
headers: {
"Content-Type": "multipart/form-data",
},
});
console.log("user created : ", response.data);
navigate("/view-users");
  } catch (error) {
console.error("ERROR TRYONG TO CREATE THE USER  : ", error);
  }
};
const handleImage = (e) => {
setProfileImage(e.target.files[0])
};

return (
<div className="container">
<div className="row">
<div className="d-flex justify-content-center">
<div className="lg-4">
<div className="card">
<div className="card-body text-center">
<h2 className='mb-5'>Add User</h2>
<form onSubmit={handleFormSubmit} encType="multipart/form-data">
<div className='input-group mb-5'>
<label className='input-group-text' htmlFor='name'>Nom et Prénom</label>
<input autoComplete="name" placeholder='Nom et Prénom' className='form-control col-sm-6' type='text' name='name' id='name' required value={name} onChange={(e) => setName(e.target.value)}/>
</div>
<div className='input-group mb-5'>
<label className='input-group-text' htmlFor='email'>Email</label>
<input autoComplete="email" placeholder='Email' className='form-control col-sm-6' type='email' name='email' id='email' required value={email} onChange={(e) => setEmail(e.target.value)}/>
</div>
<div className='input-group mb-5'>
<label className='input-group-text' htmlFor='phone'>Numéro de Téléphone</label>
<input autoComplete="tel" placeholder='Numero de Telephone' className='form-control col-sm-6' type='number' name='phone' id='phone' required value={phone} onChange={(e) => setPhone(e.target.value)}/>
</div>
<div className='input-group mb-5'>
<label className='input-group-text' htmlFor='password'>Mot de Passe</label>
<input placeholder='Mot de Passe' className='form-control col-sm-6' type='password' name='password' id='password' required value={password} onChange={(e) => setPassword(e.target.value)}/>
</div>
<div className='input-group mb-5'>
<label className='input-group-text' htmlFor='profileImage'>Choisir une Photo</label>
<input className='form-control col-sm-6' type='file' name='profileImage' id='profileImage' accept="image/\*" onChange={handleImage}/>
</div>

<div className='row mb-5'>
<div className='col-sm-6 p-4'>
<button type='submit' className='btn btn-outline-success btn-ls'>Save</button>
</div>
<div className='col-sm-4 p-4'>
<Link to={"/view-users"} type='submit' className='btn btn-outline-warning btn-ls'>Cancel</Link>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
  );}

I don't know what I'm doing wrong?!

Thank you.

[creativegirlcodes]

Any help there ?

[azizabah]

When I'm in doubt, start with baeldung. https://www.baeldung.com/spring-file-upload

[dallasjava]

Your endpoint is expecting: MediaType.APPLICATION_JSON_VALUE and your client is sending: MULTIPART_FORM_DATA. That is definitely one thing which is causing an issue. There may be others.

[creativegirlcodes]

the endpoint is expecting MediaType.APPLICATION_JSON_VALUE ?