How to save blob or binary data

[skyride99]

response is a blob....

writeBlob(response){
return RNFS.writeFile(this.path + '/' + 'first.pdf', response, 'base64')
.then((success) => {
console.log('FILE WRITTEN!');
})
.catch((err) => {
console.log(err.message);
});
},

[gunars]

Have the same issue. Is there a solution?

[npomfret]

Same, I've got a blob but i've no idea how to write it to disk

[wkh237]

I'm not sure but, according to this issue, it seems Blob objects does not have correct functionality in react native ?

[fredbt]

same question here.

[itinance]

I always use downloadFile() for dealing with binary data. It is doing an asynchronous GET-request to a specific URL and stores the response binary on device.

[fredbt]

@itinance in my particular case, the binary content depends on the request, so I don't have the concept of one URL for the data.

[AricGamma]

have you tried to use 'ascii' to encode you binary data. and write the ascii string to file.

Here is a sample in node runtime:

const buffer = fs.readFileSync('./test.png');

for (let i = 0; i < buffer.length; i++) {
  const num = buffer[i];
  const str = String.fromCharCode(num);
  fs.appendFileSync('./test1.png', str, { encoding: 'ascii' });
}

[ghost]

ASCII is not better fit for large data as it will affect performance exponentially. Better to use base64 or utf8 they are faster enough.

[tbrother]

Use RNFetchBlob.fetch() instead of the fetch API.
Then the following code will work

RNFS.writeFile(filename, response.data, 'base64')

[harshendra-1998]

Do we have solution for this ?
I want to download the csv file generated in backend which is recived in app in blob data fomat.

[ktroitsky]

You can use URL.createObjectURL(blob);, which will save the blob locally and return a URL which you can later use to render the blob (in my case it's a PDF).

[timothyerwin]

You can use URL.createObjectURL(blob);, which will save the blob locally and return a URL which you can later use to render the blob (in my case it's a PDF).

Do you have more code example? I have a base64 string of an image and I want to write it locally as an image (binary)

[ktroitsky]

You can use URL.createObjectURL(blob);, which will save the blob locally and return a URL which you can later use to render the blob (in my case it's a PDF).

Do you have more code example? I have a base64 string of an image and I want to write it locally as an image (binary)

Well, in my case blob was the built-in RNs Blob object, but if you have a string I suppose you could use the writeFile utility from react-native-fs, like in this guide

[shridhmt]

You can use URL.createObjectURL(blob);, which will save the blob locally and return a URL which you can later use to render the blob (in my case it's a PDF).

This gives [Error: Cannot create URL for blob!]

[asilliahmet]

this is how i do it:

import fs from "react-native-fs"

const blob_to_data_url = async (blob)=>(new Promise((res, rej)=>{
  const reader = new FileReader();
    reader.onloadend = () => {
      res(reader.result);
    };
    reader.onerror = (error) => {
      rej(error);
    };
    reader.readAsDataURL(blob);
}));
// blob to data url  link

const persist_blob = async (file_path, blob)=>(
  blob_to_data_url(blob)
    .then(data_url => data_url.split(",")[1])
    .then(b64 => fs.writeFile(file_path, b64, 'base64'))
);
// if you write a raw base64 string as type 'base64' it allows you to save blobs (closest thing to a buffer frontend js has)

const read_blob = async (file_path)=>(
  fetch(`file://${file_path}`).then(x => x.blob())
);
// you can fetch local files in react native

this has worked for me so far

[hkn-tr]

Without File Reader and Fetch Api

	var filePath=RNFS.DownloadDirectoryPath + '/'+ url.replace(/^.+\//g,'') + '.mp3'
	RNFS.downloadFile({
		fromUrl: url,
		toFile: filePath,
	})
            .promise.then(()=>console.log('OK to Download Folder'))
	.catch((err) => console.log('Download error:', err));