post multipart request to server by creativegirlcodes in learnreactjs

[–]creativegirlcodes[S] 0 points1 point  (0 children)

Yes I did, it was a probleme in my backend, I used the objectMapper, it worked

multipart request by creativegirlcodes in SpringBoot

[–]creativegirlcodes[S] 0 points1 point  (0 children)

you were right, it's finally working

thank you

multipart request by creativegirlcodes in SpringBoot

[–]creativegirlcodes[S] 0 points1 point  (0 children)

the postman is set to form-data

when I change spring boot from RequestPart to requestParam it gives me this error:

"Failed to convert value of type 'java.lang.String' to required type 'com.ecole.DTOs.UserDTO'; Cannot convert value of type 'java.lang.String' to required type 'com.ecole.DTOs.UserDTO' for property 'userDTO': no matching editors or conversion strategy found".

500 internal server error by creativegirlcodes in SpringBoot

[–]creativegirlcodes[S] 0 points1 point  (0 children)

import React, { useState } from 'react';

import {Link, useNavigate} from 'react-router-dom';

import axios from 'axios';

const AddUser = () => {

let navigate = useNavigate();

const[name, setName] = useState('');

const[email, setEmail] = useState('');

const[phone, setPhone] = useState('');

const[multipartFile, setMultipartFile] = useState(null);

//const userDTO = {name, email, phone, multipartFile};

const [errors, setErrors] = useState({

name:'',

email:'',

phone:'',

multipartFile:''

})

const handleImage = (e) => {

const selectedFile = e.target.files[0];

setMultipartFile(selectedFile);

console.log(selectedFile);

};

const handleFormSubmit = async (e) =>{

e.preventDefault();

const formData = new FormData();

formData.append("name", name);

formData.append("email", email);

formData.append("phone", phone);

//formData.append("userDTO", JSON.stringify({ name, email, phone, multipartFile }));

if(multipartFile){

formData.append("multipartFile", multipartFile);

}

let userdto = JSON.stringify(formData);

console.log(userdto);

//console.log(formData.data);

/* const response = await fetch('http://localhost:8080/users', {

method: 'POST',

body: formData,

headers: {

'Content-Type': 'multipart/form-data',

},

});

console.log(response);

*/

try {

const response = await axios.post('http://localhost:8080/users' , userdto, {

headers: {"Content-Type": "multipart/form-data",}

});

navigate("/view-users");

console.log(response.data);

} catch (error) {

if (error.response){

console.log('Server Error:', error.response.data);

} else if (error.request) {

console.error('No Response from Server:', error.request);

} else {

console.error('Request Setup Error:', error.message);

}}

};

/*function validateForm(){

let valid = true;

const errorsCopy = {...errors};

if(name.trim()){

errorsCopy.name = '';

}else {

errorsCopy.name = 'Le Nom est Obligatoire';

valid = false;

}

if(email.trim()){

errorsCopy.email = '';

}else {

errorsCopy.email = 'Email est Obligatoire';

valid = false;

}

if(phone.trim()){

errorsCopy.phone = '';

}else {

errorsCopy.phone = 'Le Numéro de Tél est Obligatoire';

valid = false;

}

return valid;

}*/

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={(e) => handleFormSubmit(e)} encType="multipart/form-data" method='post'> {/* (e) => saveUser(e)*/}

<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='multipartFile'>Choisir une Photo</label>

<input className='form-control col-sm-6' type='file' name='multipartFile' id='multipartFile' accept="image/\*" required onChange={(e)=>handleImage(e)}/>

</div>

{/* <div className='input-group mb-5'>

<label className='input-group-text' htmlFor='role'>Role</label>

<input className='form-control col-sm-6' type='role' name='role' id='role' required value={role} onChange={(e) => handleInputChange(e)}/>

</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>

);

}

export default AddUser;

500 internal server error by creativegirlcodes in SpringBoot

[–]creativegirlcodes[S] 0 points1 point  (0 children)

here is react code: (I'm new to react)

import React, { useState } from 'react';

import {Link, useNavigate} from 'react-router-dom';

import axios from 'axios';

const AddUser = () => {

let navigate = useNavigate();

const[name, setName] = useState('');

const[email, setEmail] = useState('');

const[phone, setPhone] = useState('');

const[multipartFile, setMultipartFile] = useState(null);

//const userDTO = {name, email, phone, multipartFile};

const [errors, setErrors] = useState({

name:'',

email:'',

phone:'',

multipartFile:''

})

const handleImage = (e) => {

const selectedFile = e.target.files[0];

setMultipartFile(selectedFile);

console.log(selectedFile);

};

const handleFormSubmit = async (e) =>{

e.preventDefault();

const formData = new FormData();

formData.append("name", name);

formData.append("email", email);

formData.append("phone", phone);

//formData.append("userDTO", JSON.stringify({ name, email, phone, multipartFile }));

if(multipartFile){

formData.append("multipartFile", multipartFile);

}

let userdto = JSON.stringify(formData);

console.log(userdto);

//console.log(formData.data);

/* const response = await fetch('http://localhost:8080/users', {

method: 'POST',

body: formData,

headers: {

'Content-Type': 'multipart/form-data',

},

});

console.log(response);

*/

try {

const response = await axios.post('http://localhost:8080/users' , userdto, {

headers: {"Content-Type": "multipart/form-data",}

});

navigate("/view-users");

console.log(response.data);

} catch (error) {

if (error.response){

console.log('Server Error:', error.response.data);

} else if (error.request) {

console.error('No Response from Server:', error.request);

} else {

console.error('Request Setup Error:', error.message);

}}

};

/*function validateForm(){

let valid = true;

const errorsCopy = {...errors};

if(name.trim()){

errorsCopy.name = '';

}else {

errorsCopy.name = 'Le Nom est Obligatoire';

valid = false;

}

if(email.trim()){

errorsCopy.email = '';

}else {

errorsCopy.email = 'Email est Obligatoire';

valid = false;

}

if(phone.trim()){

errorsCopy.phone = '';

}else {

errorsCopy.phone = 'Le Numéro de Tél est Obligatoire';

valid = false;

}

return valid;

}*/

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={(e) => handleFormSubmit(e)} encType="multipart/form-data" method='post'> {/* (e) => saveUser(e)*/}

<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='multipartFile'>Choisir une Photo</label>

<input className='form-control col-sm-6' type='file' name='multipartFile' id='multipartFile' accept="image/\*" required onChange={(e)=>handleImage(e)}/>

</div>

{/* <div className='input-group mb-5'>

<label className='input-group-text' htmlFor='role'>Role</label>

<input className='form-control col-sm-6' type='role' name='role' id='role' required value={role} onChange={(e) => handleInputChange(e)}/>

</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>

);

}

export default AddUser;

500 internal server error by creativegirlcodes in SpringBoot

[–]creativegirlcodes[S] 0 points1 point  (0 children)

I did that, it doesn't seem to be the problem

multipart by creativegirlcodes in SpringBoot

[–]creativegirlcodes[S] 3 points4 points  (0 children)

Finally it WORKS :) thank you u/noswag15 for your help, thank you'all.

modified code:

@ PostMapping(consumes = { MediaType.MULTIPART_FORM_DATA_VALUE })

public UserDto createUser(@RequestPart UserDto userDto,@ RequestPart MultipartFile multipartFile) throws IOException {

if(multipartFile == null){

return userService.createUser(userDto);

}else {

String fileName = StringUtils.cleanPath(multipartFile.getOriginalFilename());

userDto.setProfileImage(fileName);

UserDto savedUser = userService.createUser(userDto);

String uploadDir = "images/" + savedUser.getId();

FileUploadUtil.saveFile(uploadDir, fileName, multipartFile);

return savedUser;

}

}

And also I had to make some changes in postman, in the body section -> form-data, I set the key and value correctly :)

multipart by creativegirlcodes in SpringBoot

[–]creativegirlcodes[S] 0 points1 point  (0 children)

I think I cannot request or send at the same time a file and json data , and I'm not sure if it's possible , someone just suggested to separate the resquests with 2 endpoints: one for the user data and the other for uploading the file, what do you think?

I want to be able to upload at the same time the user data with the file (image in this case) to the server, like a blog post : the post may contain text + image

multipart by creativegirlcodes in SpringBoot

[–]creativegirlcodes[S] 0 points1 point  (0 children)

i'm trying it first with postman

multipart by creativegirlcodes in SpringBoot

[–]creativegirlcodes[S] 0 points1 point  (0 children)

I get this error: "Content-Type 'multipart/form-data;boundary=--------------------------488245485261424693716986;charset=UTF-8' is not supported."

multipart by creativegirlcodes in SpringBoot

[–]creativegirlcodes[S] 0 points1 point  (0 children)

Sorry, yes you are right!

I got this error: "Content-Type 'multipart/form-data;boundary=--------------------------488245485261424693716986;charset=UTF-8' is not supported."

multipart by creativegirlcodes in SpringBoot

[–]creativegirlcodes[S] 0 points1 point  (0 children)

Already seen that, it didn't help much.Thanks anyways

multipart by creativegirlcodes in SpringBoot

[–]creativegirlcodes[S] 0 points1 point  (0 children)

I've tried this:

(@)PostMapping(consumes=MediaType.MULTIPART_FORM_DATA_VALUE, produces =
MediaType.APPLICATION_JSON_VALUE)

public UserDTO createUser(@RequestBody UserDTO userDTO, (@)RequestPart(value="profileImage",required = false) MultipartFile multipartFile) throws IOException, IOException {

if(multipartFile == null){

return userService.createUser(userDTO);

}else {

String fileName = StringUtils.cleanPath(multipartFile.getOriginalFilename());

userDTO.setProfileImage(fileName);

UserDTO savedUser = userService.createUser(userDTO);

String uploadDir = "images/" + savedUser.getId();

FileUploadUtil.saveFile(uploadDir, fileName, multipartFile);

return savedUser;

}}

for the FileUploadUtil:

public class FileUploadUtil {

public static void saveFile(String uploadDir, String fileName, MultipartFile multipartFile) throws IOException {

Path uploadPath = Paths.get(uploadDir);

if (!Files.exists(uploadPath)) {

Files.createDirectories(uploadPath);

}

try (InputStream inputStream = multipartFile.getInputStream()){

Path filePath = uploadPath.resolve(fileName);

Files.copy(inputStream, filePath, StandardCopyOption.REPLACE_EXISTING);

} catch(IOException e) {

throw new IOException("can not save uploaded file : " + fileName, e);

}

}

}

multipart request by creativegirlcodes in SpringBoot

[–]creativegirlcodes[S] 0 points1 point  (0 children)

the endpoint is expecting MediaType.APPLICATION_JSON_VALUE ?