Fetch: Error when POST file multipart/form-data

[maxdonetsk]

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

[safeimuslim]

@dgraham When we remove headers, how to set token auth ?

[mnemanja]

@safeimuslim valid question. Would appreciate a suggestion.

[ramsrib]

@safeimuslim @mnemanja You don't have to remove all headers, just remove Content-Type header.

[phaberest]

@ramsrib suggestion worked for me! Just ignore the content type ;)

[cooper1x]

Delete or not.

$("input").on("change", function (e) {
            var formData = new FormData();
            var file = e.target.files[0];
            formData.append('file', file)
            var this_ = this;
            postFile('xxx', formData).then(data => console
                .log(data)).catch(error => console.error(error))
        })
        function postFile(url, formData) {
            return fetch(url, {
                method: 'POST', // 'GET', 'PUT', 'DELETE', etc.
                body: formData, // Coordinate the body type with 'Content-Type'
                credentials: "same-origin",
            }).then(response => response.json())
        }

This is how I wrote it. The request return is a failure prompt.

[iahk1510]

@dgraham thank you , u rescused me :>

[nndebug]

After a few hours of trying out many different suggestions the solution for me was to use another middleware parser in my nodejs server. Instead of body-parser I now use formidable for multipart/form-data POST's. body-parser does not handle multipart bodies: https://www.npmjs.com/package/body-parser.

[lukKowalski]

I've spend whole day looking for this answer @dgraham - thx :)

[ClearlightY]

感谢

手动设置Content-Type标头意味着缺少边界参数。删除该标头，并允许fetch生成完整的内容类型。它看起来像这样：

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

Fetch知道根据FormData作为请求body内容传入的对象创建哪个内容类型标头。

[mariembenslama]

I fixed this when I made my data inside a formData,
something like this:

var imagefile = document.querySelector("#uploadImage");
var formData = new FormData();
formData.append("file", imagefile.files[0] ? imagefile.files[0] : null);