Working with assets in @sanity/client

import {createClient} from '@sanity/client'
import {createReadStream} from 'fs'
import {basename} from 'path'

const client = createClient({
  projectId: '<your-project-id>',
  dataset: '<your-dataset>',
  apiVersion: '2026-03-01',
  token: process.env.SANITY_API_TOKEN,
  useCdn: false
})

const filePath = './images/hero.jpg'

try {
  const imageAsset = await client.assets.upload(
    'image',
    createReadStream(filePath),
    {filename: basename(filePath)}
  )

  console.log('Uploaded image:', imageAsset._id)
  console.log('URL:', imageAsset.url)
} catch (error) {
  console.error('Upload failed:', error.message)
}

// Upload and attach an image to a document in one step
const imageAsset = await client.assets.upload(
  'image',
  createReadStream('./images/hero.jpg'),
  {filename: 'hero.jpg'}
)

await client
  .patch('post-123')
  .set({
    mainImage: {
      _type: 'image',
      asset: {
        _type: 'reference',
        _ref: imageAsset._id
      }
    }
  })
  .commit()

console.log('Image attached to document')

// Upload a file from an <input type="file"> element
const input = document.querySelector('input[type="file"]') as HTMLInputElement

input.addEventListener('change', async () => {
  const file = input.files?.[0]
  if (!file) return

  try {
    const asset = await client.assets.upload('image', file, {
      filename: file.name
    })
    console.log('Uploaded file:', asset._id)
  } catch (error) {
    console.error('Upload failed:', error.message)
  }
})

// Track progress while uploading from an <input type="file"> element
const input = document.querySelector('input[type="file"]') as HTMLInputElement
const progressBar = document.querySelector('progress') as HTMLProgressElement
// percent runs from 0 to 100, but <progress> defaults to max = 1
progressBar.max = 100

input.addEventListener('change', () => {
  const file = input.files?.[0]
  if (!file) return

  client.observable.assets
    .upload('image', file, {filename: file.name})
    .subscribe({
      next: (event) => {
        if (event.type === 'progress') {
          // percent is 0 when the browser can't compute the total
          progressBar.value = event.percent
          return
        }
        // The response event carries the asset document
        console.log('Uploaded asset:', event.body.document._id)
      },
      error: (error) => console.error('Upload failed:', error),
      complete: () => console.log('Upload complete')
    })
})

const imageAsset = await client.assets.upload(
  'image',
  createReadStream('./images/photo.jpg'),
  {
    filename: 'photo.jpg',
    extract: ['palette', 'lqip', 'exif', 'location', 'blurhash']
  }
)

console.log('Palette:', imageAsset.metadata.palette)
console.log('Dimensions:', imageAsset.metadata.dimensions)

// Fetch up to 50 image assets
const images = await client.fetch('*[_type == "sanity.imageAsset"][0...50]')

// Fetch up to 50 file assets
const files = await client.fetch('*[_type == "sanity.fileAsset"][0...50]')

// Follow a reference to get asset metadata from a document
const posts = await client.fetch(`
  *[_type == 'post'][0...10] {
    title,
    mainImage {
      asset-> {
        _id,
        url,
        metadata {
          dimensions,
          palette
        }
      }
    }
  }
`)

try {
  await client.delete('image-abc123-300x200-jpg')
  console.log('Asset deleted')
} catch (error) {
  if (error.statusCode === 409) {
    // Document "<asset-id>" cannot be deleted as there are references to it from "<document-id>"
    console.error('Asset is still referenced by other documents')
  } else {
    console.error('Delete failed:', error.message)
  }
}

import {createClient} from '@sanity/client'

const client = createClient({
  apiVersion: '2026-03-01',
  useCdn: false,
  token: process.env.SANITY_API_TOKEN,
  resource: {
    type: 'media-library',
    id: 'YOUR_MEDIA_LIBRARY_ID'
  }
})

import {client} from './lib/client' // import your configured client

const mlClient = client.withConfig({
  token: process.env.SANITY_API_TOKEN,
  resource: {
    type: 'media-library',
    id: 'YOUR_MEDIA_LIBRARY_ID'
  }
})

// Query up to 50 assets in your Media Library
const assets = await client.fetch('*[_type == "sanity.asset"][0...50]')

// Query up to 50 image assets
const images = await client.fetch(
  '*[assetType == "sanity.imageAsset"][0...50]'
)

// Query up to 50 recent assets
const recentAssets = await client.fetch(
  '*[_type == "sanity.asset" && _createdAt > $date][0...50]',
  {date: '2026-01-01'}
)

import fs from 'node:fs'

// Upload an image
const imageAsset = await client.assets.upload(
  'image',
  fs.createReadStream('photo.jpg'),
  {
    filename: 'photo.jpg',
    title: 'Product Photo'
  }
)

console.log('Uploaded:', imageAsset._id)

// Upload a video. Use 'file' here because the JavaScript client only accepts
// 'image' or 'file'; Media Library still detects the MP4 as a video.
const videoAsset = await client.assets.upload(
  'file',
  fs.createReadStream('promo.mp4'),
  {filename: 'promo.mp4'}
)

console.log('Uploaded video:', videoAsset._id)

const assetId = '36fOGtOJOadpl4F9xpksb9uKjYp'

// Delete both the asset and its draft
try {
  await client
    .transaction()
    .delete(assetId)
    .delete(`drafts.${assetId}`)
    .commit()

  console.log('Asset deleted from Media Library')
} catch (error) {
  console.error('Delete failed:', error.message)
}

// Fetch a document with a video reference
const doc = await client.fetch(
  `*[_type == 'videoPage'][0]{ title, video }`
)

// Get playback info from the video asset reference
const playbackInfo = await client.mediaLibrary.video.getPlaybackInfo(
  doc.video.asset
)

console.log('Stream URL:', playbackInfo.stream.url)
console.log('Thumbnail:', playbackInfo.thumbnail.url)
console.log('Duration:', playbackInfo.duration)
console.log('Aspect ratio:', playbackInfo.aspectRatio)