[Android] React Native strips non-ASCII characters from HTTP headers

[robertying]

Description

When using React Native's FormData on Android to upload a file, things in the header Content-Disposition, such as the filename will get stripped, if they contain non-ASCII characters such as Chinese.

For example, uploading a file with the name "test测试test.jpg":

var photo = { 
	uri: uriFromCameraRoll, 
	type: 'image/jpeg', 
	name: 'test测试test.jpg', 
}; 

var body = new FormData(); 
body.append('authToken', 'secret'); 
body.append('photo', photo); 
body.append('title', 'A beautiful photo!'); 
xhr.open('POST', serverURL); 
xhr.send(body);

The actual HTTP headers sent will only include filename=testtest.jpg with 测试 stripped.

---

As I investigate, I find lines of code that should be responsible https://github.com/facebook/react-native/blob/ebc89bfb788102fbcf3eab070c5603d351620e23/ReactAndroid/src/main/java/com/facebook/react/modules/network/HeaderUtil.java.

These methods are to weaken okhttp's too strict rules on headers, but also bring this unwanted behavior.

FYI, okhttp has supported non-ASCII headers from square/okhttp#4296.

These two stripping methods may need to be looked into and synced with the upstream to reflect okhttp's changes.

---

This change was brought by #21231 in response to the issue square/okhttp#2802. The issue has been discussed in another one square/okhttp#3876, which was fixed by square/okhttp#4296.

React Native version:

System:
    OS: macOS 11.3.1
    CPU: (4) x64 Intel(R) Core(TM) i3-8100B CPU @ 3.60GHz
    Memory: 30.90 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.0 - /var/folders/mh/h5b3z2k57b37b17qxy8_347w0000gn/T/yarn--1621259423202-0.9844350161728574/node
    Yarn: 1.22.10 - /var/folders/mh/h5b3z2k57b37b17qxy8_347w0000gn/T/yarn--1621259423202-0.9844350161728574/yarn
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
    Android SDK: Not Found
  IDEs:
    Android Studio: 4.2 AI-202.7660.26.42.7351085
    Xcode: 12.5/12E262 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.8 - /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.64.1 => 0.64.1 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

1. On Android, make a multiform post to upload files (non-ASCII filenames) like the above example.
2. The server gets headers that are stripped, hence incomplete filenames.

Expected Results

Non-ASCII strings in headers should not be stripped, especially not for filenames.

Snack, code example, screenshot, or link to a repository:

Shown above.

[zhuweideng]

same issue with me。i can't upload file name with chinese. it will strip my chinese name.
if i upload "xx新.jpg" it will be like "xx.jpg"

[vladimirevstratov]

Same issue RN 0.70, do you have any updates?