CODEWITHSUNDEEP
javascriptcurlyoutube-apifetchyoutube-data-api
I am L
I am L

Reputation: 4662

YouTubeAPI: How to upload thumbnail (JS)

I tried uploading thumbnail on youtube using this guide: https://developers.google.com/youtube/v3/docs/thumbnails/set

I was able to successfully run it on postman using this curl:

curl --location --request POST 'https://www.googleapis.com/upload/youtube/v3/thumbnails/set?videoId=<video id>' \
--header 'Authorization: OAuth <token>' \
--header 'Content-Type: image/png' \
--form 'thumbnail=@"/C:/Users/user/Pictures/nami.PNG"'

However I have trouble translating that into js, what I did so far is:

// the "file" is the File from <input type="file"> - data on this looks ok
uploadThumbnail async (file) {
   const formData = new FromData();
   const formData.append('thumbnail', file, 'test.png');


   await fetch.post('https://www.googleapis.com/youtube/v3/thumbnails/set', {
     headers: {
        Authorization: 'Oauth <token>',
        'Content-Type': 'multipart/form-data' // I also tried using the file.type here (image/png)
     },
     query: {
       videoId: <video id>
     },
     body: formData,
   })
}

(to simplify the logic, I only manually typed the code above, so pardon if there are any typo.)

but this throws The request does not include the image content. I don't understand, I also tried converting the File into Blob, but same error.

Upvotes: 2

Views: 1008

Answers (1)

I am L
I am L

Reputation: 4662

As pointed out on the comments on my main post, I combined the answers and came up with this (this works!)

   await fetch.post(`https://www.googleapis.com/upload/youtube/v3/thumbnails/set?videoId=${videoId}&uploadType=media`, {
     headers: {
        Authorization: 'Bearer <token>',
        'Content-Type': file.type
     },
     body: file,
   })

Mistakes are:

  • My endpoint is wrong and is missing uploads (this API is different from other youtube endpoints, so if you are reusing a variable base_url better check it out.
  • Using Oauth instead of Bearer.
  • There are no query in fetch
  • No need to convert and add the formData, pass the file directly instead.

Upvotes: 3

Related Questions