Get a peek at our latest innovations at Sanity Product Day on Dec 8th →

How to Upload an Image to a Document Using the YouTube API

4 replies
Last updated: Oct 28, 2021

Hi everyone, I'm looking for an example of fetching an image from a remote URL and uploading it to a document via a custom input component. I’ve already built the input component in which the editor can paste in a YouTube URL and it fetches the title, description and thumbnail via the YouTube API. I’m just not sure about storing the image in the document. Is there a code example somewhere?

Oct 27, 2021, 1:48 PM

Not sure if this requires a custom plugin or if I can use the patch API to set the image.

Oct 27, 2021, 5:45 PM

I did something similar for uploading an image from an external API into a document in my dataset via the JS client. Maybe you can adapt some of that script to work in your component?

Oct 27, 2021, 7:33 PM

I’ll have a look Racheal. I guess there’s no reason why someone couldn’t use the client in the studio since it’s just another React app. Thanks very much for the response!

Oct 27, 2021, 9:11 PM

So I ended up having to change my approach due to the YouTube CORS policy. I’m just storing the thumbnail URL in a custom input that just loads and displays the image in the studio via the URL. Works just fine! I’ll keep your code for future reference though.

Oct 28, 2021, 9:07 PM

Sanity.io: Get the most out of your content

Sanity.io is a platform to build websites and applications. It comes with great APIs that let you treat content like data. Free to get started, and pay-as-you-go on all plans. Find out more.