---
title: "Can you store files (blobs) in IndexedDB?"  
description: "Can you store files (blobs) in IndexedDB?"  
author: "Rana Sunny"  
published: 2025-07-03  
updated: 2025-07-03  
canonical: https://www.mindstick.com/interview/34311/can-you-store-files-blobs-in-indexeddb  
category: "database"  
tags: ["database", "indexeddb"]  
reading_time: 4 minutes  

---

# Can you store files (blobs) in IndexedDB?

## 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)

```javascript
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

```javascript
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](https://www.mindstick.com/interview/34298/how-do-you-handle-offline-data-sync-using-indexeddb) | ✅ Yes |

## Answers

### Answer by Rana Sunny

## 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)

```javascript
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

```javascript
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](https://www.mindstick.com/interview/34298/how-do-you-handle-offline-data-sync-using-indexeddb) | ✅ Yes |


---

Original Source: https://www.mindstick.com/interview/34311/can-you-store-files-blobs-in-indexeddb

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.