Discussion on how to upload multipart/form-data images to Sanity CDN, including issues with Formidable and solutions involving arrayBuffer and raw-body module.

const data = await new Promise((resolve, reject) => {

form.parse(req, (err, fields, files) => {

const { _id } = await client.assets.upload("image", files);

export default function Component() {
  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formdata = new FormData(e.target);

    fetch("/api/uploadImage", {
      method: "POST",
      body: formdata,
    })
      .then((res) => res.json())
      .then((r) => console.log(r))
      .catch((err) => console.log(err));
  };

  return (
    <div>
      <form encType="multipart/form-data" onSubmit={handleSubmit}>
        <input type="file" id="inputFile" name="avatar" />
        <button
          type="submit"
          className="rounded-md bg-indigo-500 px-4 py-1 text-white"
        >
          Upload
        </button>
      </form>
    </div>
  );
}

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const file = req.body;
  try {
    const response = await client.assets.upload("image", Buffer.from(file));
    res.status(200).json(response);
  } catch (err) {
    console.log(err); // input buffer contains unsupported image format
    res.status(500).send(err);
  }
}

export default function Component() {
  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const file = e.currentTarget[0].files[0];

    fetch("/api/uploadImage", {
      method: "POST",
      body: file,
    })
      .then((res) => res.json())
      .then((r) => console.log(r))
      .catch((err) => console.log(err));
  };

  return (
    <div>
      <form encType="multipart/form-data" onSubmit={handleSubmit}>
        <input type="file" id="inputFile" name="avatar" />
        <button
          type="submit"
          className="rounded-md bg-indigo-500 px-4 py-1 text-white"
        >
          Upload
        </button>
      </form>
    </div>
  );
}

export default function Component() {
  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const file = e.currentTarget[0].files[0];

    fetch("/api/uploadImage", {
      method: "POST",
      body: file,
    })
      .then((res) => res.json())
      .then((r) => console.log(r))
      .catch((err) => console.log(err));
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input type="file" id="inputFile" name="avatar" />
        <button
          type="submit"
          className="rounded-md bg-indigo-500 px-4 py-1 text-white"
        >
          Upload
        </button>
      </form>
    </div>
  );
}

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const file = req.body;
  try {
    const response = await client.assets.upload("image", Buffer.from(file));
    res.status(200).json(response);
  } catch (err) {
    console.log(err); // input buffer contains unsupported image format
    res.status(500).send(err);
  }
}

const file = e.currentTarget[0].files[0];

const file = e.currentTarget[0].files[0];

const file = e.currentTarget[0].files[0].arrayBuffer();

export const config = {
  api: {
    bodyParser: false
  }
};

	const submit = (e: FormEvent) => {
		e.preventDefault();
		const file = (e.currentTarget as HTMLFormElement).file.files[0] as File;
		fetch('/api/hello', {
            method: 'POST',
            body: file
        })
	};

	return (
        <form onSubmit={submit}>
            <input type="file" name="file" />
            <button type="submit">Submit</button>
        </form>
	);

export const config = {
  api: {
    bodyParser: false
  }
};

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  const buffer = req.read(req.readableLength);
  client.assets.upload('image', buffer);
  res.status(200).json({ name: 'John Doe' })
}

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

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const buffer = req.read(req.readableLength);
  client.assets
    .upload("image", buffer)
    .then((imageAsset) => res.status(200).json(imageAsset))
    .catch((err) => res.status(400).send(err)); // premature end of input file
}

// frontend
const handleUpload = async () => {
      // const selectedFile = target.files[0]
      if (!selectedFile) return;
      const formData = new FormData();
      const arrayBuffer = await selectedFile.arrayBuffer();
      formData.append("image", arrayBuffer);
      const { data } = await <http://axios.post|axios.post>("/api/image", arrayBuffer, {
        headers: {
          "Content-Type": "application/octet-stream",
        },
      });
  };

// backend
api/image.js

import { client } from "../../lib/sanityClient";
import getRawBody from "raw-body";

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

const handler = async (req, res) => {
  const rawBody = await getRawBody(req);  
  await client.assets.upload("image", rawBody, {
    contentType: "image/jpeg",
  });
  res.status(201).json({ message: "success" });
};

export default handler;