How to attach browser-generated blob as image in Sanity editor?

import {useClient} from 'sanity'

function GenerateOGImageButton({documentId}) {
  const client = useClient({apiVersion: '2025-02-06'})
  
  const handleGenerateOGImage = async () => {
    // 1. Generate your OG image as a blob (using canvas, html2canvas, etc.)
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    // ... your image generation logic here
    
    // 2. Convert canvas to blob
    const blob = await new Promise(resolve => 
      canvas.toBlob(resolve, 'image/png')
    )
    
    // 3. Upload to Sanity
    const asset = await client.assets.upload('image', blob, {
      filename: `og-image-${documentId}.png`,
      contentType: 'image/png'
    })
    
    // 4. Update your document with the new image asset reference
    await client
      .patch(documentId)
      .set({
        ogImage: {
          _type: 'image',
          asset: {
            _type: 'reference',
            _ref: asset._id
          }
        }
      })
      .commit()
      
    console.log('OG image uploaded!', asset)
  }
  
  return (
    <button onClick={handleGenerateOGImage}>
      Generate og:image
    </button>
  )
}

// customOGImageSource.js
import React, {useCallback} from 'react'
import {Dialog, Card} from '@sanity/ui'

export default function OGImageGenerator({onSelect, onClose, document}) {
  const handleGenerate = useCallback(async () => {
    // Generate your blob
    const blob = await generateOGImageBlob(document)
    
    // Return it to Sanity's asset system
    onSelect([{
      kind: 'file',  // Using 'file' kind for blob/File objects
      value: blob,
      assetDocumentProps: {
        originalFilename: `og-image-${document._id}.png`,
        source: {
          name: 'og-generator',
          id: document._id
        }
      }
    }])
  }, [onSelect, document])

  return (
    <Dialog header="Generate OG Image" onClose={onClose} open>
      <Card padding={4}>
        <button onClick={handleGenerate}>Generate</button>
      </Card>
    </Dialog>
  )
}

// Asset source plugin definition
export const ogImageAssetSource = {
  name: 'og-generator',
  title: 'Generate OG Image',
  component: OGImageGenerator,
  icon: () => '🖼️'
}

{
  name: 'ogImage',
  type: 'image',
  options: {
    sources: [ogImageAssetSource]
  }
}