Creating and using Blobs 💾🔄✨

[u/Low_Mammoth_9371]

[u/Low_Mammoth_9371]

Code as text:

// Three ways to crete a Blob:

// 1) Manually:
const blob = new Blob(["data"], { type: 'text/plain' });

// 2) From URL resource:
(async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const blob = await res.blob();
)();

// 3) From user input:
const input = document.querySelector('input[type="file"]');
const file = input.files[0]; // File object is a type of Blob!


// Things you can do with a Blob:

// Create temporary URL to its data for use on the page:
const url = URL.createObjectURL(blob);

// Read with FileReader:
const fr = new FileReader();
fr.addEventListener('load', () => console.log(fr.result));
fr.readAsDataURL(blob); // Reads to Base64 encoded string

// Get size of data in bytes:
blob.size;

// Send as data payload:
fetch('endpoint.url', { method: 'POST', body: blob });

YT turorial: https://youtu.be/WqBs_msUOXY