YouTubeAPI: How to upload thumbnail (JS)

Question

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.

Even if it actually works, the `curl` command above falls outside the documented behavior of YouTube Data API. The *proper* `curl` command can be seen within the answer I recently provided on this forum: [Upload thumbnail to Youtube API using curl](https://stackoverflow.com/a/66265461/8327971). — stvar, Mar 16 '21 at 14:53
From the quoted answer, you could quite easily derive the proper JS call to `Thumbnails.set` endpoint. — stvar, Mar 16 '21 at 14:55
You may also read the following answer for to see how to upload a file using JS' `fetch` API: [How do I upload a file with the JS fetch API?](https://stackoverflow.com/a/36082038/8327971). — stvar, Mar 16 '21 at 14:58
@I am L: please reformulate *@stvar which one?* I don't get it. — stvar, Mar 16 '21 at 14:59
@DaImTo and stvar, I combined all the answers that you gave and it worked, thanks! — I am L, Mar 16 '21 at 15:27

I am L · Accepted Answer · 2021-03-17T09:02:16.890

3

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.

edited Mar 17 '21 at 09:02

answered Mar 16 '21 at 15:31

I am L

4,288
6
32
49

2

Please note that the invoking URL *should* contain the parameter `uploadType=media`. It may work *now* without it; however, it's always a good practice to code according to specs. (See for example the official public code from Google: [`discovery.py`](https://github.com/googleapis/google-api-python-client/blob/66bb32cc70353296dbf1876ae8c22baf6562cfb9/googleapiclient/discovery.py#L862); unfortunately, I cannot indicate to you official JS code since Google's [`GAPI`](https://github.com/google/google-api-javascript-client) is not open-source.) – stvar Mar 16 '21 at 17:47
@stvar I didn't know this (and is not on the docs) thanks for the info! cheers! – I am L Mar 17 '21 at 07:04
2

Indeed the [official endpoint docs](https://developers.google.com/youtube/v3/docs/thumbnails/set) are not as explicit as the official source code is w.r.t. this issue. Unfortunately, right now I cannot indicate you official docs (as opposed to official code) that specify that request parameter, but I'll look it up. In any case, please update your answer above, such that other SO users interested by your answer to use the *spec-compliant URL*. – stvar Mar 17 '21 at 08:55
Here is an [official page](https://developers.google.com/drive/api/v3/reference/files/create) that's part of Google Drive API; the request parameter [`uploadType`](https://developers.google.com/drive/api/v3/reference/files/create#uploadType_id) is verbosely documented, including its `media` value. – stvar Mar 17 '21 at 09:40
1

You may question whether this quote is relevant to YouTube Data API or not; but, please consider that the REST mechanisms implemented by Google (which include uploading files to Google Drive or thumbnails to YouTube) are used across a whole set of different APIs that may look unrelated at a first glance. – stvar Mar 17 '21 at 09:41

YouTubeAPI: How to upload thumbnail (JS)

1 Answers1