Using a custom input component to upload and transform images in Sanity.io.

import {defineField, defineType} from 'sanity'

export default defineType({
  name: 'transformedImage',
  type: 'object',
  fields: [
    defineField({
      name: 'original',
      type: 'image',
      title: 'Original Image'
    }),
    defineField({
      name: 'transformed',
      type: 'image',
      title: 'Transformed Image'
    })
  ],
  components: {
    input: MyCustomImageTransform  // Your custom component
  }
})

import {useCallback} from 'react'
import {Stack, Card} from '@sanity/ui'
import {set, unset} from 'sanity'

function MyCustomImageTransform(props) {
  const {value, onChange, renderDefault} = props
  
  const handleOriginalUpload = useCallback(async (originalAsset) => {
    if (!originalAsset) return
    
    // 1. Get the asset URL
    const imageUrl = originalAsset.asset.url
    
    // 2. Create your canvas and do your transformation
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    // ... your canvas transformation logic here ...
    
    // 3. Convert canvas to blob
    const blob = await new Promise(resolve => 
      canvas.toBlob(resolve, 'image/png')
    )
    
    // 4. Upload the blob as a new asset using the Sanity client
    const transformedAsset = await props.client.assets.upload('image', blob, {
      filename: 'transformed.png'
    })
    
    // 5. Update both fields using onChange
    onChange([
      set({
        original: originalAsset,
        transformed: {
          _type: 'image',
          asset: {
            _type: 'reference',
            _ref: transformedAsset._id
          }
        }
      })
    ])
  }, [onChange, props.client])
  
  // Render the default input but intercept changes
  return (
    <Stack space={3}>
      {renderDefault({
        ...props,
        // Override the onChange to intercept original image uploads
        onChange: (patchEvent) => {
          const patches = patchEvent.patches
          const originalPatch = patches.find(p => p.path?.[0] === 'original')
          
          if (originalPatch?.value) {
            handleOriginalUpload(originalPatch.value)
          } else {
            onChange(patchEvent)
          }
        }
      })}
    </Stack>
  )
}