Sanity.io API upload images from URL

Question

Cross post from slack#help channel...

I'm creating a Sanity/Nuxt site for a client that includes a blog component. His primary marketing source is Instagram and since Instagram's API only allows for single-image posts I'm trying to go about it in the reverse way. I'm setting up a Netlify function where the client will paste in the link to the Instagram post and the function will fetch all associated images via URL using the /?__a=1 trick to fetch public data from Instagram. What I would like to do is fetch all of the images from said Instagram post, upload them as assets, and then create a blog post utilizing said uploaded images. I've modified the built-in Netlify function to create a Sanity document, where I'm pulling the image as an arrayBuffer, converting it to 'base64', then trying to upload.

When I try to run the file, found at https://gist.github.com/jeffpohlmeyer/d9824920fc1eb522ceff6380edb9de80 , I get the following error:

body: {
       statusCode: 400,
       error: 'Bad Request',
       message: 'Invalid image, could not read metadata',
       details: 'Input buffer contains unsupported image format'
     },

Can anyone suggest a way I can do this? As an alternative I figured I could just link to the URLs hosted on Instagram instead of hosting the images within Sanity but it makes it difficult to maintain for the client if, for example, the Instagram post changes or he wants to change the cover image, choosing URLs instead of images would be difficult.

Answer 1

Assuming:

Your images are an array on your Sanity Document;

You are using the Sanity Javascript client;

This will accept the data of the document you'd like to associate an image with in an array (to reference the ID), and the URL of the image you would like to upload into the document. It'll turn the image URL into a buffer.. upload it to Sanity as an asset... and then associate the asset to the document that got passed through.

import { client } from "@/lib/sanity/client";
import streamifier from 'streamifier';

async function saveImage(postData, imageUrl){
    const imageBuffer = await fetch(imageUrl).then((response) => response.blob()).then((blob) => blob.arrayBuffer()).then((arrayBuffer) => Buffer.from(arrayBuffer))
    const updatedPost = await client.assets
        .upload('image', await streamifier.createReadStream(imageBuffer), {
            filename: postData?._id+'-' + await Date.now()
        })
        .then(async imageAsset => {
            return await client
                .patch(postData?._id)
                .setIfMissing({ images: [] })
                .insert("after", "images[-1]", [
                    {
                        asset: {
                            _type: "reference",
                            _ref: imageAsset._id
                        }
                    },
                ])
                .commit({autoGenerateArrayKeys: true})
                .catch((e) => { console.log(e)})
            })
            .catch((e) => { 
                console.log(e)
                return e
            })
        return (updatedPost)
    }

Answer 2

Tried the same on my repl:

async function uploadImage(){
const image = await axios.get(
    '<<url>>',
    { responseType: 'arraybuffer' }
  )
  const data = Buffer.from(image.data, 'binary');

  client.assets
    .upload('image', data)
    .then(() => {
      console.log('Done!')
    })
    .catch((err) => {
      console.log('err', err)
      return { statusCode: 400 }
    })
}
uploadImage();

just remove base64 conversion done and this should work