Wrong encoding of `filename` parameter on FormData

[piranna]

react-native/Libraries/Network/FormData.js

Line 74 in 26684cf

headers['content-disposition'] += '; filename="' + value.name + '"';

When appending a File object to a FormData instance, the filename parameter is set as is defined in the file name attribute, throwing an exception if it includes non-ASCII characters. According to the spec, it must be encoded as ISO-8859-1, and ideally, also have a filename* parameter with the name encoded as rfc-5987, so full Unicode characters can be used in the filename. To sanitize the filename parameter to be ISO-8859-1, maybe the windows-1252 npm module could be used...

Environment

Environment:
  OS: Linux 4.13
  Node: 9.5.0
  Yarn: Not Found
  npm: 5.6.0
  Watchman: 4.9.0
  Xcode: N/A
  Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
  react: ^16.2.0 => 16.2.0
  react-native: ^0.54.0 => 0.54.0

Expected Behavior

FormData instance would be able to encode a File object (in fact, a React Native "blob") with non-ASCII characters on its name (more exactly, spanish tildes).

Actual Behavior

Steps to Reproduce

1. create a FormData instance
2. append a File object or ReactNative "blob" with non-ASCII characters in the name
3. send the FormData using fetch()
4. crash

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[piranna]

This issue is still happening in latest version of React Native and needs some community attention. It could be a good candidate for the "Good first issue" label, too.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[piranna]

This is still happening in latest version.

[elliscwc]

Also having this issue when user trying to upload filename with korean/chinese words.
I think react-native is using okhttp, they have a solution for this: square/okhttp#4296 but not yet included in react-native, hope this will get attention it needed.

[deepsh4h]

How do I handle this in RN ?

[frenberg]

How do I handle this in RN ?

In my case I added an encodeURIComponent(filename) but I suppose it depends on if you have access to the backend or if you can live with the consequence of ugly filenames