When users insert images into the web comment editor, we currently use data URLs (base64 encoding) to store images in drafts. This allows unauthenticated users to create drafts with images that persist across sessions without uploading to IPFS until the comment is published. However, the current data URL approach has significant UX issues:

Browser Freezing: Base64 encoding blocks the main thread, causing the editor to freeze, especially with larger images (>1MB)

Performance: Data URLs are 33% larger than the original files, slowing down draft serialization and deserialization

Poor Mobile Experience: The encoding delay is even more noticeable on mobile devices

Why We Can't Just Upload Immediately

Unauthenticated Access: Anyone can create comment drafts without an account

Orphaned Uploads: If we upload images immediately, users who add images but never publish would create orphaned IPFS data

Resource Abuse: Malicious users could paste many images and waste daemon resources

I asked AI as suggested and this is what it came up with:

Option 1: Blob URLs ❌ NOT GOOD for your use case

const displaySrc = URL.createObjectURL(img) // "blob:http://..."

Option 2: IndexedDB with Blob Storage ✅ BEST for your use case

// Store original file in IndexedDB
const imageId = `draft-img-${Date.now()}`
await indexedDB.put('draft-images', img, imageId)

// Create blob URL for display (fast!)
const displaySrc = URL.createObjectURL(img)

node.create({
  displaySrc: displaySrc,     // Temporary display (fast)
  imageId: imageId,           // Reference to IndexedDB
  name: name,
})

// On mount/reload: recreate blob URL from IndexedDB
const storedBlob = await indexedDB.get('draft-images', imageId)
if (storedBlob) {
  const displaySrc = URL.createObjectURL(storedBlob)
  // Update block with new blob URL
}

Option 3: Data URLs (Current approach) ⚠️ Works but slow

const dataUrl = await readAsDataURL(img) // "data:image/jpeg;base64,..."

Option 4: Upload Immediately ⚠️ Orphan problem

My Recommendation: IndexedDB (Option 2)