Problem trying to send the file to the server as base64

[GabrielDuarteJr]

Hello, I'm trying to create a image upload function for a react-native app integrating with rocketchat, for which I'm using the rn-fetch-blob and react-native-image-picker libraries.

Versions of the libraries

• "react-native": "0.71.3",
• "rn-fetch-blob": "^0.12.0",
• "react-native-image-picker": "^5.3.1",

Code:

const uploadImage = () => {
  const options: ImageLibraryOptions = {
      mediaType: 'photo',
      includeBase64: true,
    };

    launchImageLibrary(options, images => {
      images.assets?.forEach(async (image: any) => {
        const formDataTest: IFileUpload[] = [];

        formDataTest.push({
          name: 'file',
          type: image.type,
          filename: image.fileName,
          data: RNFetchBlob.base64.encode(image.base64),
        });

        const headers = {
          'Content-Type': 'multipart/form-data',
          'Transfer-Encoding': 'Chunked',
          'X-Auth-Token': token,
          'X-User-Id': id,
        };

        RNFetchBlob.fetch(
          'POST',
          `${CHAT_URL}/api/v1/rooms.upload/${ROOMS_ID}`,
          headers,
          formDataTest,
        )
          .then(response => {
            console.log('response', response);
          })
          .catch(error => {
            console.log(error);
            console.log('error', JSON.stringify(error));
          });
      });
    });
  };

I'm able to retrieve the correct base64 string with the react-native-image-picker library, and when I perform the fetch using the rn-fetch-blob library, I receive a 200 response. However, when I check the image received by the server, it simply does not load in the rocketchat client.

I've tried several solutions listed here and in other issues, but without success.

Any help is welcome, thank you!

[ezanglo]

Hi! Im working on the same feature, instead of base64, use the uri,

        formDataTest.push({
          name: 'file',
          type: image.type,
          filename: image.fileName,
          data: RNFetchBlob.wrap(image.uri),
        });

this is all good on android, however im having an issue with ios, please let me know if you are able to fix it too :)