React native upload image as binary using rn-fetch-blob

Question

I am trying to upload an image as binary. I used rn-fetch-blob library for this one. Because normal fetch gives network errors.

const path = file.path.replace('file://', '');
const uploadPath = RNFetchBlob.wrap(path);

RNFetchBlob.fetch(
    'PUT',
      SERVER_URL,
      uploadPath,
  )
    .then(res => {
      console.log('image uploaded res ---> ',res);
    })
    .catch(err => {
      console.log(err);
    });

it uploads an empty stream and the server stores a zero-byte size file. Any solution for this issue?

score 1 · Accepted Answer · answered Apr 05 '23 at 10:39

1

it uploads an empty stream and the server stores a zero-byte size file. Any solution for this issue?

This is because it is not able to find the image file at the path specified. Can you please try something like this and let me know ?

  const filePath = Platform.OS === 'ios'
 ? res.path().replace('file:///', '').replace('file://', '')
 : res.path().replace('file://', '').replace('file:/', '');

  RNFetchBlob.fetch('PUT', 'your-server-url', {
   // this is required, otherwise it won't be processed as a multipart/form-data request
    'Content-Type' : 'multipart/form-data',
  }, [
    // append field data from file path
    {
      name : 'test',
      filename : 'test.png',
      // Change BASE64 encoded data to a file path with prefix `RNFetchBlob-file://`.
      // Or simply wrap the file path with RNFetchBlob.wrap().
      data: RNFetchBlob.wrap(filePath)
    }
  ]).then((resp) => {
    // ...
  }).catch((err) => {
    // ...
  })

Hope it helps

answered Apr 05 '23 at 10:39

inkredusk

919
4
16

Got an error like this \n – Dulaj Madusanka Apr 05 '23 at 11:29
what is the exact error message please? Can you please check if this error occurs in server side? If yes, you will need to resolve that first. – inkredusk Apr 05 '23 at 11:59
"The request signature we calculated does not match the signature you provided. Check your key and signing method" This was the error – Dulaj Madusanka Apr 05 '23 at 12:13
are you uploading the file to `Amazon S3` by any chance or is it on some other server? – inkredusk Apr 05 '23 at 12:59
Finally, it's working. Thanks. Yep It's S3 – Dulaj Madusanka Apr 05 '23 at 13:25

React native upload image as binary using rn-fetch-blob

1 Answers1