RNFS.uploadFiles upload raw not multipart

[jsina]

I've tried to upload file from RNFS from iPad air2, but when I log it out from nc -l I see that there is no Content-Disposition and Content-Type, in fact it seems to be raw instead of multipart.

POST / HTTP/1.1
Host: 192.168.1.5:10002
Content-Type: multipart/form-data; boundary=----A63774C3-4BB0-499B-975A-43D99F8D07B4
Connection: keep-alive
Accept: application/json
User-Agent: DNA/1 CFNetwork/978.0.7 Darwin/18.2.0
Content-Length: 711529
Accept-Language: en-us
Accept-Encoding: gzip, deflate

I'm using "react-native-fs": "^2.13.3", and this is my react-native info:

System:
    OS: macOS 10.14.3
    CPU: (4) x64 Intel(R) Core(TM) i5-6267U CPU @ 2.90GHz
    Memory: 64.70 MB / 8.00 GB
    Shell: 2.6.0 - /usr/local/bin/fish
  Binaries:
    Node: 10.16.0 - ~/.config/fnm/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.9.0 - ~/.config/fnm/bin/npm
    Watchman: 4.7.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
    Android SDK:
      API Levels: 16, 21, 23, 25, 26, 27, 28
      Build Tools: 23.0.1, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.0, 26.0.1, 26.0.2, 26.0.3, 27.0.0, 27.0.1, 27.0.2, 27.0.3, 28.0.3
      System Images: a...ult | ARM EABI v7a, a...-21 | Intel x86 Atom, a... | Intel x86 Atom_64
  IDEs:
    Xcode: 10.3/10G8 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6 
    react-native: ^0.60.5 => 0.60.5 
  npmGlobalPackages:
    create-react-native-app: 2.0.2
    react-native-cli: 2.0.1
    react-native-git-upgrade: 0.2.7

[hank121314]

Can you show me your js code? It should have Content-Disposition if RNFS.uploadFiles.files have a valid filepath.

[jsina]

sure @hank121314, here it is:

export const uploadFotoAsync = async (fileName: string) => {
 const filePath = getPath(fileName);
 const files = [
      {
        name: fileName,
        filename: fileName,
        filepath: filePath,
        filetype: 'image/jpeg',
      },
    ];
    const r = RNFS.uploadFiles({
      toUrl: ApiUploadUrl,
      files,
       method: 'POST',
      url: ApiUploadUrl,
      maxRedirects: 0,
      data,
      onUploadProgress,
});
    const uploadPromise = await r;
    const promiseResult = await uploadPromise.promise;
}

[hank121314]

OK! Can you also show me how the getPath function works?

[scottewart]

Hi @jsina, I've created a pull request to fix this, if you want to apply it before it's pulled (or if it's pulled), then it's fix #759

@itinance feel free to use the pull request above or you can roll your own fix.

[IvanCaceres]

@jsina @itinance I can confirm that uploadFiles on ios is broken for this library and seems to produce a malformed request.

Applying your PR fixed the issue for me and my Laravel server was finally able to detect the files.
I hope they merge your fix into the main release.

Thanks to both of you for bringing this up.

[itinance]

Thanks @IvanCaceres for your feedback! @scottewart's PR is merged.

[jsina]

btw I've got error yet,
the version of package is:
"react-native-fs": "^2.13.3",

here is my code:

export const uploadFotoAsync = async (
  fileName: string,
  appApiType: ApiType
) => {
  try {
    const filePath = getPath(fileName);
    const fileExist = await RNFS.exists(filePath);

    if (!fileExist) {
      throw new Error(fileName + ' does not exist!');
      return false;
    }
    const url = appApiType === 'test' ? ApiUploadUrl : ProductionApiUploadUrl;

    const files = [
      {
        name: fileName,
        filename: fileName,
        filepath: filePath,
        filetype: 'image/jpeg',
      },
    ];
    const r = RNFS.uploadFiles({
      toUrl: url,
      files,
      method: 'POST',
      headers: {
        Accept: 'application/json',
      },
      fields: {
        hello: 'world',
      },
      begin: uploadBegin,
      progress: uploadProgress,
    });
    const uploadPromise = await r;
    const promiseResult = await uploadPromise.promise;
    if (promiseResult.statusCode === 200) {
      return true;
    }
    return false;
  } catch (e) {
    console.log('error', e);
    return false;
  }
};

export const getPath = (fileName: string): string => {
  const path = `${RNFS.DocumentDirectoryPath}/${fileName}`;
  return path.toString();
};

and here is the error log:

"{"responseStatus":{
   "errorCode":"JsonReaderException","message":"Input string '------35DFB288-76CC-47CD-B7E8-7D1CBAED888A' is not a valid number. 
Path '', line 1, position 42....