Javascript - I created a blob from a string, how do I get the string back out?

Opera of Blob reading methods

Sure, FileReader is the marquee name, but JavaScript has a ton of other supporting characters that can also read a nice Blob.

Async Blob Reading: World, meet blob.text()

The starlet here, blob.text(), returns a promise that resolves to a text string.

const blob = new Blob(['Hello async world'], { type: 'text/plain' });
blob.text().then(text => console.log(text)); //Who needs FileReader anyway?


Blob in a Response: It’s a Promise!

Turn that Blob into a Response object and use .text() method that, you guessed it, returns a promise.

const blob = new Blob(['Blob in a promise'], { type: 'text/plain' });
new Response(blob).text().then(console.log); // New star on the block!


Let fetch() do the heavy lifting

Another way is by creating a blob URI with URL.createObjectURL(). Remember to URL.revokeObjectURL() or you’ll have memory leaks haunt you.

const blob = new Blob(['Fetching data'], { type: 'text/plain' });
const blobUrl = URL.createObjectURL(blob);

fetch(blobUrl).then(response => response.text())
.then(text => {
  console.log(text); // Fetch this!
  URL.revokeObjectURL(blobUrl); 
});


The elegant async/await ballet

A modern approach involves using async/await. More readability, less "callback hell".

const blob = new Blob(['Await the string'], { type: 'text/plain' });

async function getBlobText(blob) {
  return await blob.text();
}

getBlobText(blob).then(console.log); // Async? More like easy-sync!


Remember, error handling is your safety net in this asynchronous trapeze act. Use try/catch.

Keeping data on a short leash

Blob Type: Your safety harness

Specify the type when you're creating a Blob or your data might try out some unexpected transformations:

const textBlob = new Blob(['Typing along'], { type: 'text/plain' });


Strings as Arrays: The Trojan Horse

Wrap strings in an array when sending them to Blob constructor, and your data format can ride along safely inside:

const lines = ['Line 1', 'Line 2', 'Line 3'];
const blob = new Blob([lines.join('\n')], { type: 'text/plain' });
// Keeping those line breaks in line!


Access Blob Data: Timing is key

Access the Blob data only within the FileReader.onload event to ensure you're not showing up early to the party:

const immediateBlob = new Blob(['Now or never'], { type: 'text/plain' });
const reader = new FileReader();
reader.onload = () => {
  console.log('Blob whispered:', reader.result);
};
reader.readAsText(immediateBlob);
// Access granted... after the beep!
