Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error when POST file multipart/form-data #505

Closed
maxdonetsk opened this issue Apr 9, 2017 · 10 comments
Closed

Error when POST file multipart/form-data #505

maxdonetsk opened this issue Apr 9, 2017 · 10 comments

Comments

@maxdonetsk
Copy link

@maxdonetsk maxdonetsk commented Apr 9, 2017

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

What do I do wrong?

@dgraham

This comment has been minimized.

Copy link
Member

@dgraham dgraham commented Apr 10, 2017

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.

@dgraham dgraham closed this Apr 10, 2017
@maxdonetsk

This comment has been minimized.

Copy link
Author

@maxdonetsk maxdonetsk commented Apr 11, 2017

@dgraham Thanks a lot! You saved a lot of my time :)

@safeimuslim

This comment has been minimized.

Copy link

@safeimuslim safeimuslim commented Mar 15, 2018

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

@mnemanja

This comment has been minimized.

Copy link

@mnemanja mnemanja commented Apr 4, 2018

@safeimuslim valid question. Would appreciate a suggestion.

jeremy-carbonne added a commit to jeremy-carbonne/swagger-codegen-typescript-browser that referenced this issue May 24, 2018
@ramsrib

This comment has been minimized.

Copy link

@ramsrib ramsrib commented Jun 1, 2018

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

@phaberest

This comment has been minimized.

Copy link

@phaberest phaberest commented Jan 10, 2019

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

@cooper1x

This comment has been minimized.

Copy link

@cooper1x cooper1x commented Mar 7, 2019

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.

@YeuNhamMeVk

This comment has been minimized.

Copy link

@YeuNhamMeVk YeuNhamMeVk commented Jul 24, 2019

@dgraham thank you , u rescused me :>

@nndebug

This comment has been minimized.

Copy link

@nndebug nndebug commented Sep 18, 2019

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

This comment has been minimized.

Copy link

@lukKowalski lukKowalski commented Feb 10, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
10 participants
You can’t perform that action at this time.