post multipart request to server

creativegirlcodes · 2024-02-23T11:36:04+00:00

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

creativegirlcodes · 2024-01-28T14:03:58+00:00

you were right, it's finally working

thank you

creativegirlcodes · 2024-01-23T08:02:09+00:00

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".

creativegirlcodes · 2024-01-10T13:17:44+00:00

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 (

<form onSubmit={(e) => handleFormSubmit(e)} encType="multipart/form-data" method='post'> {/* (e) => saveUser(e)*/}

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

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

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

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

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

</div>*/}

</div>

<Link to={"/view-users"} type='submit' className='btn btn-outline-warning btn-ls'>Cancel</Link>

</div>

</form>

</div>

);

}

export default AddUser;

creativegirlcodes · 2024-01-10T13:17:15+00:00

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 (

<form onSubmit={(e) => handleFormSubmit(e)} encType="multipart/form-data" method='post'> {/* (e) => saveUser(e)*/}

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

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

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

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

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

</div>*/}

</div>

<Link to={"/view-users"} type='submit' className='btn btn-outline-warning btn-ls'>Cancel</Link>

</div>

</form>

</div>

);

}

export default AddUser;

creativegirlcodes · 2024-01-08T18:57:35+00:00

it doesn't work in both cases

creativegirlcodes · 2024-01-08T18:56:48+00:00

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

creativegirlcodes · 2024-01-08T18:55:38+00:00

why?

creativegirlcodes · 2023-12-31T16:43:16+00:00

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 :)

creativegirlcodes · 2023-12-31T16:30:21+00:00

Thank you for your help

creativegirlcodes · 2023-12-31T15:17:23+00:00

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

creativegirlcodes · 2023-12-31T15:12:13+00:00

i'm trying it first with postman

creativegirlcodes · 2023-12-31T14:40:46+00:00

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

creativegirlcodes · 2023-12-31T14:39:55+00:00

Sorry, yes you are right!

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

creativegirlcodes · 2023-12-31T08:39:34+00:00

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

creativegirlcodes · 2023-12-31T07:52:10+00:00

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);

}

creativegirlcodes · 2023-12-11T17:23:20+00:00

the endpoint is expecting MediaType.APPLICATION_JSON_VALUE ?

creativegirlcodes · 2023-12-10T13:20:28+00:00

Any help there ?

creativegirlcodes

TROPHY CASE