Select document file from phone and upload to server

Question

I am trying to get a document file from phone storage when button is pressed and than upload it server. But i don't know which library to use and how to do it.

Answer 1

If you are willing to use a library you have both React-native-fetch-blob or axios.

If React-native-fetch-blob you can do it like this:

RNFetchBlob.fetch('POST', 'http://www.example.com/upload-form', {
    Authorization : "Bearer access-token",
    otherHeader : "foo",
    'Content-Type' : 'multipart/form-data',
  }, [
    // element with property `filename` will be transformed into `file` in form data
    { name : 'avatar', filename : 'avatar.png', data: binaryDataInBase64},
    // custom content type
    { name : 'avatar-png', filename : 'avatar-png.png', type:'image/png', data: binaryDataInBase64},
    // part file from storage
    { name : 'avatar-foo', filename : 'avatar-foo.png', type:'image/foo', data: RNFetchBlob.wrap(path_to_a_file)},
    // elements without property `filename` will be sent as plain text
    { name : 'name', data : 'user'},
    { name : 'info', data : JSON.stringify({
      mail : 'example@example.com',
      tel : '12345678'
    })},
  ]).then((resp) => {
    // ...
  }).catch((err) => {
    // ...
  })

You will hae to manage to get the file path from libraries like RNFS or even RNFetch blob.

https://github.com/wkh237/react-native-fetch-blob

You can use axios too (https://github.com/mzabriskie/axios), but I don't use it so I can't help you any further.

The difference between both is the way they send the data. RNFB uses the fetch api and goes down to native to get the Base64 encoding, axios works over XMLHttpRequests, which is more likely to be used in internet browsers.

Hope it helps.