Can you store files (blobs) in IndexedDB?

Question

Rana Sunny · Answer

What is a Blob?
A Blob (Binary Large Object) is used to represent file-like binary data. IndexedDB can store Blobs directly in object stores.
Use Cases for Storing Blobs
Offline image galleriesAudio/video playback without networkCaching documents (PDFs, Word files, etc.)Progressive Web Apps (PWAs)
Example: Store and Retrieve a File
1. Store a file (image blob)
function storeImage(file) {
    const request = indexedDB.open("MyDB", 1);
    request.onupgradeneeded = function (e) {
        const db = e.target.result;
        if (!db.objectStoreNames.contains("files")) {
            db.createObjectStore("files", { keyPath: "name" });
        }
    };
    request.onsuccess = function (e) {
        const db = e.target.result;
        const tx = db.transaction("files", "readwrite");
        const store = tx.objectStore("files");
        const fileData = {
            name: file.name,
            type: file.type,
            blob: file // actual Blob or File
        };
        store.put(fileData);
        tx.oncomplete = () =andgt; console.log("File stored successfully");
    };
}
2. Retrieve and display the file
function loadImage(name) {
    const request = indexedDB.open("MyDB", 1);
    request.onsuccess = function (e) {
        const db = e.target.result;
        const tx = db.transaction("files", "readonly");
        const store = tx.objectStore("files");
        const getRequest = store.get(name);
        getRequest.onsuccess = () =andgt; {
            const fileData = getRequest.result;
            const url = URL.createObjectURL(fileData.blob);
            const img = document.createElement("img");
            img.src = url;
            document.body.appendChild(img);
        };
    };
}
Considerations
Concern
Detail
Storage size limits
Depends on browser (~50MB to several hundred MB)
Blob lifetime
Blobs are persistent inside IndexedDB, not just in memory
Async reading
Reading blobs is async; always use callbacks/promises
File types supported
Any file type (PDF, PNG, MP3, etc.)
Summary
Feature
Support in IndexedDB
Store File or Blob
✅ Yes
Read as Blob
✅ Yes
Use with andlt;imgandgt;, andlt;audioandgt;, etc.
✅ Yes
Good for offline apps
✅ Yes

interview

Can you store files (blobs) in IndexedDB?

Rana Sunny

Can you answer this question?

1 Answers

What is a Blob?

Use Cases for Storing Blobs

Example: Store and Retrieve a File

1. Store a file (image blob)

2. Retrieve and display the file

Considerations

Summary

Liked By

Concern	Detail
Storage size limits	Depends on browser (~50MB to several hundred MB)
Blob lifetime	Blobs are persistent inside IndexedDB, not just in memory
Async reading	Reading blobs is async; always use callbacks/promises
File types supported	Any file type (PDF, PNG, MP3, etc.)

Feature	Support in IndexedDB
Store File or Blob	✅ Yes
Read as Blob	✅ Yes
Use with `<img>`, `<audio>`, etc.	✅ Yes
Good for offline apps	✅ Yes