Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion AI Tools Integration
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

interview

Home Interviews Can you store files (blobs) in IndexedDB? – MindStick
Ask Question

1 Answers

Rana Sunny
Rana Sunny 03 Jul 2025
Report Abuse

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 galleries
  • Audio/video playback without network
  • Caching 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 = () => 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 = () => {
            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 <img>, <audio>, etc. ✅ Yes
Good for offline apps ✅ Yes
MindStick Training
Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md