Uploading image to Sanity from Next.js API with server-side node.js

// Your Sanity client config
export const client = sanityClient({
  projectId: 'your-project-id',
  dataset: 'production',
  apiVersion: '2024-01-01',
  token: process.env.NEXT_PUBLIC_SANITY_WRITE_TOKEN, // Note the NEXT_PUBLIC_ prefix!
});

// In your component
const handleSubmit = async (e) => {
  e.preventDefault();
  
  // Upload the file directly from browser
  const { _id } = await client.assets.upload('image', fileInput);
  
  // Then create your document with the asset reference
  const doc = {
    _type: 'yourDocType',
    image: {
      _type: 'image',
      asset: {
        _type: 'reference',
        _ref: _id,
      },
    },
  };
  
  await client.create(doc);
};

import { client } from '../../lib/sanity';
import multer from 'multer';

async function parseFormData(req, res) {
  const storage = multer.memoryStorage();
  const multerUpload = multer({ storage });
  const multerFiles = multerUpload.any();
  
  await new Promise((resolve, reject) => {
    multerFiles(req, res, (result) => {
      if (result) return reject(result);
      return resolve(result);
    });
  });
  
  return {
    fields: req.body,
    files: req.files,
  };
}

export const config = {
  api: {
    bodyParser: false, // Important!
  },
};

export default async function handler(req, res) {
  const sanityClient = client.withConfig({
    token: process.env.SANITY_WRITE_TOKEN, // No NEXT_PUBLIC prefix needed
  });

  const data = await parseFormData(req, res);

  // Upload the buffer to Sanity
  const { _id } = await sanityClient.assets.upload(
    'image',
    data.files[0].buffer // This is the key - use the buffer!
  );
  
  const doc = {
    _type: 'yourDocType',
    ...data.fields,
    image: {
      _type: 'image',
      asset: {
        _type: 'reference',
        _ref: _id,
      },
    },
  };

  await sanityClient.create(doc);
  res.status(200).json({ success: true });
}

<form action='/api/upload' method='POST' encType='multipart/form-data'>
  <input name='title' type='text' />
  <input type='file' name='image' />
  <button type='submit'>Upload</button>
</form>