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

FormData appears to be handled differently/incorrectly in 0.27 #4643

Closed
dwightwatson opened this issue Apr 27, 2022 · 4 comments
Closed

FormData appears to be handled differently/incorrectly in 0.27 #4643

dwightwatson opened this issue Apr 27, 2022 · 4 comments

Comments

@dwightwatson
Copy link

Describe the bug

Form uploads appear to have broken between v0.26 and v0.27. Requests that used to work without issue no longer work.

Here is sample code that accepts a file and attempts to upload it to Cloudinary using form data.

export const upload = (file) => {
  const formData = new FormData();
  formData.set("file", file);
  formData.set("upload_preset", CLOUDINARY_UPLOAD_PRESET);

  return axios.post(
    `https://api.cloudinary.com/v1_1/${CLOUDINARY_CLOUD}/upload`,
    formData
  );
};

Inspecting the v0.26 request in with Chrome shows that it at least understands the content provided:
image

Inspecting the v0.27 request in Chrome it appears to show more raw data - as if the form data wasn't handled correctly and is corrupted.
image

I've attempted to use the alternate FormData syntax for v0.27 as suggested in the documentation but I have the same issue.

export const upload = (file) => {
  return axios.post(`https://api.cloudinary.com/v1_1/${CLOUDINARY_CLOUD}/upload`, {
    file: file,
    upload_preset: CLOUDINARY_UPLOAD_PRESET
  }, {
    headers: {
      "Content-Type": "multipart/form-data"
    }
  });
};

To Reproduce

I couldn't get this running on RunKit because it's a Node environment, where my issue is in the browser using the native FormData vs the form-data npm package. However, the code below can be used (making a dummy request to /api) that would demonstrate the difference in request handing between the two affected versions.

export const upload = (file) => {
  const formData = new FormData();
  formData.set("file", file);
  formData.set("additional_parameter", "additional_parameter");

  return axios.post("/api", formData);
};

Expected behavior

I would have expected the request with form data that worked in v0.26 to continue to work in v0.27 without issue.

Environment

  • Axios Version 0.27
  • Browser: Chrome
  • Browser Version: 100
  • Node.js Version: 18.0.0
  • OS: maxOS 12.3.1

Additional context/Screenshots

Add any other context about the problem here. If applicable, add screenshots to help explain.

@Yusoo
Copy link

Yusoo commented Apr 27, 2022

I had the same problem

@GuoSirius
Copy link

image

this is needed!

@philBrown
Copy link

Duplicate of #4631

@jasonsaayman
Copy link
Member

Fixing this in 0.27.2

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

No branches or pull requests

5 participants