react-native icon indicating copy to clipboard operation
react-native copied to clipboard

fix: FormData filename in content-disposition

Open foyarash opened this issue 5 months ago • 2 comments

Summary:

This Pull Request fixes a regression introduced in https://github.com/facebook/react-native/commit/7c7e9e6571c1f702213e9ffbb40921cd5a1a786b, which adds a filename* attribute to the content-disposition of a FormData part. However, as the MDN states, there is no filename* attribute for the content-disposition header in case of a form data.

The filename* attribute would break the parsing of form data in the request, such as in frameworks like Next.js which uses the web implementation of Request.

Fixes #44737

Changelog:

[General] [Fixed] - Remove non compliant filename* attribute in a FormData content-disposition header

Test Plan:

  • Clone the react-native repo
  • Create a simple JS file that will act as a node server and execute it
const http = require('http');

const server = http.createServer(async function (r, res) {
    const req = new Request(new URL(r.url, 'http://localhost:3000'), {
      headers: r.headers,
      method: r.method,
      body: r,
      duplex: 'half',
    });

    const fileData = await req.formData();

    console.log(fileData);
    res.writeHead(200);
    res.end();
});
server.listen(3000);
  • Go to packages/rn-tester
  • Add a useEffect in js/RNTesterAppShared.js
React.useEffect(() => {
    const formData = new FormData();
    formData.append('file', {
      uri: 'https://www.gravatar.com/avatar',
      name: '测试photo/1.jpg',
      type: 'image/jpeg',
    });

    fetch('http://localhost:3000', {
      method: 'POST',
      body: formData,
    }).then(res => console.log(res.ok));
  });
  • Run the app on iOS or Android
  • The node server should output the file added to the FormData with an encoded name

foyarash avatar Sep 17 '24 15:09 foyarash