From 1e62fe4074c8978219aee4c21861355c0dc5ed27 Mon Sep 17 00:00:00 2001
From: fourdim <59462000+fourdim@users.noreply.github.com>
Date: Sat, 1 Jul 2023 08:05:57 +0800
Subject: [PATCH] fix: missing blob mime types in IndexedDB (#3280)

---
 packages/store/src/persistence/blob/indexeddb-storage.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/store/src/persistence/blob/indexeddb-storage.ts b/packages/store/src/persistence/blob/indexeddb-storage.ts
index 9abcf2507796..7ae24868696d 100644
--- a/packages/store/src/persistence/blob/indexeddb-storage.ts
+++ b/packages/store/src/persistence/blob/indexeddb-storage.ts
@@ -4,10 +4,12 @@ import type { BlobStorage } from './types.js';
 
 export const createIndexeddbStorage = (database: string): BlobStorage => {
   let dbPromise: ReturnType<typeof createStore>;
+  let mimeTypeDbPromise: ReturnType<typeof createStore>;
   // async import `idb-keyval` to avoid side effect
   const idbPromise = import('idb-keyval').then(({ createStore, ...idb }) => {
     // don't change the db name, it's for backward compatibility
     dbPromise = createStore(`${database}_blob`, 'blob');
+    mimeTypeDbPromise = createStore(`${database}_blob_mime`, 'blob_mime');
     return idb;
   });
   return {
@@ -15,22 +17,27 @@ export const createIndexeddbStorage = (database: string): BlobStorage => {
       get: async (key: string) => {
         const get = (await idbPromise).get;
         const db = await dbPromise;
+        const mimeTypeDb = await mimeTypeDbPromise;
         const res = await get<ArrayBuffer>(key, db);
         if (res) {
-          return new Blob([res]);
+          return new Blob([res], { type: await get(key, mimeTypeDb) });
         }
         return null;
       },
       set: async (key: string, value: Blob) => {
         const set = (await idbPromise).set;
         const db = await dbPromise;
+        const mimeTypeDb = await mimeTypeDbPromise;
         await set(key, await value.arrayBuffer(), db);
+        await set(key, value.type, mimeTypeDb);
         return key;
       },
       delete: async (key: string) => {
         const del = (await idbPromise).del;
         const db = await dbPromise;
+        const mimeTypeDb = await mimeTypeDbPromise;
         await del(key, db);
+        await del(key, mimeTypeDb);
       },
       list: async () => {
         const keys = (await idbPromise).keys;