bad base-64 fs.readStream

[kholiavko-roman]

Info

"rn-fetch-blob": "^0.11.2",
"react-native": "^0.60.5",
platform: both

Issue:
Cant write file after it read from stream as base64.
My test file is image (jpg)

YellowBox.js:71 Possible Unhandled Promise Rejection (id: 0):
Error: bad base-64
Error: bad base-64
    at createErrorFromErrorData 

What:
I want to read from stream as base64 string and save it to new file using fs.createFile

const { fs } = RNFetchBlob;

  fs
    .exists(file.image.path)
    .then(exist => {
      console.log('Send file socket exist', exist);

      if (exist) {
        console.log('index file exists');

        fs
          .readStream(file.image.path, 'base64', 102400)
          .then(stream => {
            stream.open();

            let result = '';

            stream.onData(chunk => {
              result += chunk;

              // console.log('Chunk', chunk);
              // console.log('~~~~~~~~~~~~');
            });
            stream.onError(error => {
              console.log('ERRRRORRRR');
              console.log(error);
            });
            stream.onEnd(() => {
              const dirs = RNFetchBlob.fs.dirs;

              // .writeFile(
              RNFetchBlob.fs
                .createFile(
                  dirs.DownloadDir + '/tesssssssst.jpg',
                  result,
                  'base64'
                )
                .then(() => {});
            });
          })
          .catch(err => {
            console.log(err);
          });
      } else {
        console.log('index file NOT exists');
      }
    })
    .catch(err => {
      console.log(err);
    });

[kholiavko-roman]

I try to copy all base64 after all chunks received, and paste it to some decoder, like this one
But it return an error too.

Also If I copy paste my chunks parts by parts to this decoder, it will be render first chunk as expected, as part of my image, but after second it return unable to decode base64

[kholiavko-roman]

But if I use fs.readFile with base64 encoding and try to write file - all works fine.

const { fs } = RNFetchBlob;

fs
    .exists(file.image.path)
    .then(exist => {
      console.log('Send file socket exist', exist);

      if (exist) {
        console.log('index file exists');

        console.log(file.image);

        RNFetchBlob.fs.readFile(file.image.path, 'base64')
        .then((data) => {
          // handle the data ..

          const dirs = RNFetchBlob.fs.dirs;

          // .writeFile(
          RNFetchBlob.fs
            .createFile(
              dirs.DownloadDir + '/tesssssssst.jpg',
              data,
              'base64'
            )
            .then(() => {
              console.log('Write file!');
            })
            .catch(err => {
              console.log(err);
            });

        })

[Traviskn]

It looks like this is a bug with read stream.

However, am I correct in assuming that you are trying to move or copy a file? It would be much more efficient to to use the fs.mv api to move or the fs.cp api to copy. In my own usage of rn-fetch-blob, I never read files into JS memory as base 64 because it is quite inefficient.

[kholiavko-roman]

I created this code as example for issue. In my case I try to test sending file using web-sockets, and my plan was using readStream and by small pieces sent it to server. On my mind in this case if I will read file by 100-300 kb it will be efficient.

Can you please look around the issue, maybe it will be quick to fix it ?

[Traviskn]

Thanks for more details on your use case, that makes sense. I don't know if there will be a quick fix but I can try to look into it. If there is anyone in the community who is also able to help, it would be much appreciated!

[kholiavko-roman]

Thank you!

[NanduKkd]

Any progress here?

[NanduKkd]

I changed the buffersize from 102400 to 102399 and it worked like magic! 102401 didn't work but 102402 worked.

[khayym]

const stream = await RNFetchBlob.fs.readStream('(file path)', 'base64'); let fileContentsBuffer = Buffer.from('', 'base64'); await new Promise((resolve, reject) => { stream.onError(error => reject(error)); stream.open(); stream.onData(chunk => (fileContentsBuffer = Buffer.concat([fileContentsBuffer, Buffer.from(chunk, 'base64')]))); stream.onEnd(() => resolve()); });

try this.
https://github.com/joltup/rn-fetch-blob/issues/315

[ehsaniara]

But if I use fs.readFile with base64 encoding and try to write file - all works fine.

const { fs } = RNFetchBlob;

fs
    .exists(file.image.path)
    .then(exist => {
      console.log('Send file socket exist', exist);

      if (exist) {
        console.log('index file exists');

        console.log(file.image);

        RNFetchBlob.fs.readFile(file.image.path, 'base64')
        .then((data) => {
          // handle the data ..

          const dirs = RNFetchBlob.fs.dirs;

          // .writeFile(
          RNFetchBlob.fs
            .createFile(
              dirs.DownloadDir + '/tesssssssst.jpg',
              data,
              'base64'
            )
            .then(() => {
              console.log('Write file!');
            })
            .catch(err => {
              console.log(err);
            });

        })

I managed to make that code work for both Android and IOS just by changing the path to:

const path = `${fs.dirs.CacheDir}/${fileName}`; // uuid.m4a or uuid.mp3
fs.exists(path)
....