Downloading a binary file with POST method in React Native

Question

I am using React-native on the front end with a PHP backend on my server. I need to be able send a passcode to the server that I want to download a file from. I am connecting to a PHP script which is using the X-SendFile library to send the file back if the passcode was correct.

Currently I am using RNFS.downloadFile() to download and save files, but that only seems to work with GET and not with POST. I would prefer to be able to save the files to the DocumentDirectoryPath.

My current code looks like this:

await RNFS.downloadFile({
    fromUrl: 'http://example.com/myfile.zip',
    toFile: RNFS.DocumentDirectoryPath + "/userdata/myfile.zip",
}).promise

I would like to be able to do something like this:

await RNFS.downloadFile({
    method: post,
    body: {passcode: "abc123", filename: "myfile.zip"},
    fromUrl: 'http://example.com/getfile.php',
    toFile: RNFS.DocumentDirectoryPath + "/userdata/myfile.zip",
}).promise

How can I change my code so that it passes the passcode as a POST parameter?

Refer to the usage documentation https://github.com/itinance/react-native-fs - which is RNFS.uploadFiles({ method:post.... not RNFS.downloadFile({ method: post ... for uploading file. — zainoz.zaini, Jan 11 '18 at 12:28

Tukan · Accepted Answer · 2018-01-12T05:24:20.987

5

As it can be seen in the following file, lines 58 through 70, react-native-fs does not support what you are trying to achieve.

FS.common.js @ react-native-fs github page

However, there are other libraries that can help you. react-native-fetch-blob supports what you are trying to achieve in the following format;

RNFetchBlob
.config({
  path : RNFetchBlob.fs.DocumentDir + '/userdata/myfile.zip'
})
.fetch(
  'POST',
  'http://example.com/myfile.zip',
  {
    //headers...
  },
  JSON.stringify({
    //request body...
    passcode: "abc123",
    filename: "myfile.zip"
  }),
)
.then((res) => {
  console.log('The file saved to ', res.path())
})

While it should work this way, I'd advise you not to resort to this and use Authentication schemas for auth such as HTTP Basic Auth and query strings / headers for other data while trying to download files and use GET requests.

edited Jan 12 '18 at 05:24

answered Jan 05 '18 at 11:36

Tukan

2,253
15
17

Thank you. Each file will have its own password associated with it. The passwords are stored in the files table in a database. Would you still recommend HTTP Basic Auth for such a situation? – kojow7 Jan 08 '18 at 05:53
Yes. You can handle the data to accommodate your needs. – Tukan Jan 08 '18 at 11:17
For some reason this does not work unless I use JSON.stringify on the request body section. The error I get is "TypeError: expected dynamic type 'string', but had type `object' (constructing arguments for RNFetchBlob.fetchBlob at argument index 5). I am also not sure why it is saying that it is argument index 5 when there are 4 arguments in the fetch function. Once I JSON.stringify it, it seems to work, however, I am now getting a 0 byte file. So not sure why I am not getting an error instead. Also, the URL should have been a PHP address. – kojow7 Jan 10 '18 at 23:21
Please see my most recent question about this 0 byte file. – kojow7 Jan 10 '18 at 23:21
If you are receiving that error, sending JSON.stringify is the correct action. I might have missed it or documentation might be stale. About getting 0 byte file, could you show us your code? – Tukan Jan 10 '18 at 23:29
1

unfortunately `react-native-fetch-blob` was migrated to `rn-fetch-blob` and the later states that it is no longer maintained - [link](https://github.com/joltup/rn-fetch-blob) – Blue Bot Dec 13 '20 at 13:21

Downloading a binary file with POST method in React Native

1 Answers1