diff --git a/artifacts/chrome.zip b/artifacts/chrome.zip
index bc01203d..6540c415 100644
Binary files a/artifacts/chrome.zip and b/artifacts/chrome.zip differ
diff --git a/src/components/Sidebar/chat/FilePreviewBar.tsx b/src/components/Sidebar/chat/FilePreviewBar.tsx
index 7ab7f4c0..e8661be5 100644
--- a/src/components/Sidebar/chat/FilePreviewBar.tsx
+++ b/src/components/Sidebar/chat/FilePreviewBar.tsx
@@ -12,7 +12,8 @@ const FilePreviewBar = ({ files, removeFile }: FilePreviewBarProps) => {
   return (
     <div className="cdx-flex cdx-gap-2 cdx-m-2">
       {files.map((file) => {
-        const imageUrl = URL.createObjectURL(file.blob)
+        const imageUrl = file.src
+
         return (
           <div key={file.id} className="cdx-flex cdx-relative">
             <a
diff --git a/src/hooks/useChatCompletion.ts b/src/hooks/useChatCompletion.ts
index a1651b3e..146412d6 100644
--- a/src/hooks/useChatCompletion.ts
+++ b/src/hooks/useChatCompletion.ts
@@ -3,10 +3,9 @@ import { ChatOpenAI } from 'langchain/chat_models/openai'
 import { AIMessage, HumanMessage, SystemMessage } from 'langchain/schema'
 import { useMemo, useState } from 'react'
 import { AvailableModels, Mode } from '../config/settings'
-import { ChatRole, useCurrentChat } from './useCurrentChat'
 import { getMatchedContent } from '../lib/getMatchedContent'
+import { ChatRole, useCurrentChat } from './useCurrentChat'
 import { MessageDraft } from './useMessageDraft'
-import { convertBlobToBase64 } from '../lib/convertBlobToBase64'
 
 interface UseChatCompletionProps {
   model: AvailableModels
@@ -108,7 +107,7 @@ export const useChatCompletion = ({
                   message.files.map(async (file) => {
                     return {
                       type: 'image_url',
-                      image_url: await convertBlobToBase64(file.blob),
+                      image_url: file.src,
                     } as const
                   }),
                 )
diff --git a/src/hooks/useMessageDraft.ts b/src/hooks/useMessageDraft.ts
index e0f7825a..7b703605 100644
--- a/src/hooks/useMessageDraft.ts
+++ b/src/hooks/useMessageDraft.ts
@@ -1,10 +1,11 @@
 import { useState } from 'react'
 import { getUUID } from '../lib/getUUID'
+import { convertBlobToBase64 } from '../lib/convertBlobToBase64'
 
 export interface MessageFile {
   id: string
   type: string
-  blob: Blob
+  src: string
 }
 
 export interface MessageDraft {
@@ -22,11 +23,11 @@ export const useMessageDraft = () => {
     setMessageDraft((p) => ({ ...p, text }))
   }
 
-  const addMessageDraftFile = (blob: Blob) => {
+  const addMessageDraftFile = async (blob: Blob) => {
     const file = {
       id: getUUID(),
       type: blob.type,
-      blob,
+      src: await convertBlobToBase64(blob),
     }
     setMessageDraft((p) => ({ ...p, files: [...p.files, file] }))
   }