Error when POST file multipart/form-data

Hi, I got an error every time when trying to POST data to the API. Request:

changeUserAvatar(authParam, file) {
    let formData = new FormData();
    //file is actually new FileReader.readAsDataURL(myId.files[0]);
    formData.append('profile_image', file);
    
    fetch(BASE_URL + 'profile-image', {
      method: 'POST',
      headers: {
	'Content-Type': 'multipart/form-data',
	'Authorization': authParam
      },
      body: formData
    }).then((response) => {
      return response.json();
    }).then((response) => {
      debugger;
    }).catch((error) => {
      console.error(error);
    });
  }

Error: profile_image can not be blank (422).

But it’s not blank!

Request payload:

What do I do wrong?

[dgraham]

Setting the Content-Type header manually means it’s missing the boundary parameter. Remove that header and allow fetch to generate the full content type. It will look something like this:

Content-Type: multipart/form-data;boundary=----WebKitFormBoundaryyrV7KO0BoCBuDbTL

Fetch knows which content type header to create based on the FormData object passed in as the request body content.

[maxdonetsk]

@dgraham Thanks a lot! You saved a lot of my time 😃