Converting URL to Binary in React Native for Backend File Upload

Backend
1

Help Needed: Sending File as Binary in React Native

I’m stuck trying to upload a file in my React Native app. The backend expects a binary file in the request. Here’s what I’ve got in the form data:

Form Data
file: (binary)
id: 12345678

I have the file path like ‘file://var/mobile/…’, but I’m not sure how to turn this into binary data for the request. Any ideas on how to do this conversion? I’ve been searching for a while but can’t find a clear solution.

Has anyone dealt with this before? What’s the best way to handle file uploads in React Native when the server wants binary data? Thanks for any help!

2

hey lucas, i’ve dealt with this before. you can use the ‘react-native-fs’ library to read the file as binary. something like:

RNFS.readFile(filePath, ‘base64’).then(content => {
// use content in your request
});

hope that helps! let me know if u need more details

3

hm, interesting problem! have u considered using fetch API with blob? like:

fetch(url, {
method: ‘POST’,
body: new Blob([fileData], {type: ‘application/octet-stream’})
})

might work? curious to hear if anyone else has other ideas too!

4

For sending binary file data in React Native, I’ve found the ‘react-native-blob-util’ library to be quite effective. It handles file operations and network requests seamlessly. Here’s a basic approach:

import RNFetchBlob from 'react-native-blob-util';

const uploadFile = async (filePath, id) => {
  try {
    const response = await RNFetchBlob.fetch('POST', 'YOUR_API_ENDPOINT', {
      'Content-Type': 'multipart/form-data',
    }, [
      { name: 'file', filename: 'file.jpg', data: RNFetchBlob.wrap(filePath) },
      { name: 'id', data: id.toString() }
    ]);
    console.log(response.text());
  } catch (error) {
    console.error(error);
  }
};

This method efficiently handles the binary conversion and upload process. It’s been reliable in my projects, especially when dealing with larger files.