Post to given endpoint as multipart file

Question

I've got working backend in Spring Boot with JWT-secured endpoint for modifying avatar of current user. The following request from Insomnia with correct Bearer works fine:

But this code

updateAvatar(context, avatar) {
          const fd = new FormData();
          fd.append('file', avatar.data);
          return new Promise((resolve, reject) => {
              axios.post('/saveavatar',
                  {file: fd},
                  {headers: {'Authorization': 'Bearer ' + localStorage.getItem('access_token')}})
                  .then(response => {
                      resolve(response)
                  })
                  .catch(error => {
                      reject(error)
                  })
          })
      },

fails with error

the request was rejected because no multipart boundary was found

What am I doing wrong?

https://stackoverflow.com/questions/36005436/the-request-was-rejected-because-no-multipart-boundary-was-found-in-springboot — tony19, Mar 17 '19 at 23:19

score 0 · Answer 1 · answered Mar 18 '19 at 08:02

The second argument to post should be the actual FormData, fd in your case.

axios.post('/saveavatar',
              fd,
              {headers: {'Authorization': 'Bearer ' + localStorage.getItem('access_token')}})

The reason it works in Insomia is that it takes care of your request and figures out that it needs to ads a boundary, axios will do the same, but needs a valid FormData.

Post to given endpoint as multipart file

1 Answers1