Search code examples
reactjsaxiosredux-sagaformiksaga

send file from formik reactjs to springboot using axios with saga

i can send file "userPicture" from postman and get it in the backend (springboot )and i save it to my database mongodb without any problem but when i send the picture from the form i use Formik component in reactjs and axios i display the content of my input userPicture i get enter image description here

in axios i made this to sent the request. for boundary i dont know what is i made copy past "WebKitFormBoundaryQ0pBuvRC1EzDAQWT" from an exemple 

  try {
        const { user } = action;
        console.log(user);
        const request = yield axios({
            method: 'post',
            url: ENDPOINTS.USER + '/add',
            data: user,
            headers: { 'Content-Type': 'multipart/form-data;boundary=----WebKitFormBoundaryQ0pBuvRC1EzDAQWT----' }
        });

in the backend i get this error

,org.springframework.validation.BindingResult,org.springframework.web.multipart.MultipartFile,org.springframework.web.multipart.MultipartFile) throws java.io.IOException: Required request part 'userPicture' is not present

i get the same error in postman when i send request without userPicture parameter

Solution

  • Looks like you sending the file incorrectly. If you want to send multipart/form-data from client to server, you need to use FormData.

    Like this

    const formData = new FormData();
formData.append('usePicture', user)