Introduction to Fetch Blob

Fetch Blob is a powerful tool for handling Blob objects in JavaScript. It provides a variety of APIs that make it easy to interact with and manipulate blobs. In this article, we’ll go through some of the most useful Fetch Blob APIs with practical code snippets and a simple app example to demonstrate how to use them.

What is a Blob?

A Blob (Binary Large Object) is a file-like object of immutable, raw data. Blobs represent data that isn’t necessarily in a JavaScript-native format. The File interface is based on Blob, and it allows blobs to represent files on the user’s system.

Fetching a Blob

To fetch a Blob, you can use the Fetch API in combination with the Blob APIs. Below is an example:

  fetch('path/to/your/image.png')
    .then(response => response.blob())
    .then(blob => {
      // Handle the Blob object here
      console.log(blob);
    })
    .catch(error => console.error('Error fetching the blob:', error));

Creating a Blob

You can create a new Blob using the Blob constructor. Here is an example:

  const blob = new Blob(['Hello, world!'], { type: 'text/plain' });
  console.log(blob);

Reading a Blob

To read the contents of a Blob, you can use the FileReader API. Here is an example:

  const reader = new FileReader();
  reader.onload = () => {
    console.log(reader.result);
  };
  reader.readAsText(blob);

Saving a Blob

You can save a Blob as a file using a download link. Here is an example:

  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'hello.txt';
  a.click();
  URL.revokeObjectURL(url);

Converting a Blob to Base64

Sometimes, you might need to convert a Blob to a Base64 string. This can be done using the FileReader API:

  const reader = new FileReader();
  reader.onloadend = () => {
    const base64String = reader.result.split(',')[1];
    console.log(base64String);
  };
  reader.readAsDataURL(blob);

Practical App Example

Here, we’ll build a simple app that fetches an image as a Blob and allows the user to download it:

  document.getElementById('fetch-image').addEventListener('click', () => {
    fetch('path/to/your/image.png')
      .then(response => response.blob())
      .then(blob => {
        const url = URL.createObjectURL(blob);
        const img = document.createElement('img');
        img.src = url;
        document.body.appendChild(img);

        const a = document.createElement('a');
        a.href = url;
        a.download = 'downloaded_image.png';
        a.textContent = 'Download Image';
        document.body.appendChild(a);
      })
      .catch(error => console.error('Error fetching the image:', error));
  });

Fetch and Download Image

Click the button above to fetch an image and provide a download link for it.

In this article, we have covered various APIs provided by Fetch Blob to handle Blob objects, with practical examples including fetching, creating, reading, and saving Blobs. We also built a simple app that demonstrates these concepts.

Hash: 03212968620c8af01fa7c8966f4aaf3de7390d5f66bac59b9de99d0e25a89d3c