vimeo.js icon indicating copy to clipboard operation
vimeo.js copied to clipboard

Add support for uploading pictures

Open erunion opened this issue 6 years ago • 5 comments

We have support for uploading pictures in our PHP SDK and would be nice to have that functionality here too.

Upload documentation: https://developer.vimeo.com/api/upload/thumbnails

erunion avatar Dec 11 '18 19:12 erunion

I am working on this for my own purposes. I'm sure my code could be ported over easily, but I'm getting hung up on the last step.

  const reqActiveOpts = {
    method: 'PATCH',
    url: `https://api.vimeo.com${thumbURI}`,
    headers: {
      'Authorization': `bearer ${env.VIMEO_ACCESS_TOKEN}`,
      'Content-Type': 'application/json',
      'Accept': 'application/vnd.vimeo.*+json;version=3.4',
    },
    data: {
      active: true
    },
  }
  const thumbActiveResponse = await axios(reqActiveOpts)

It always responds with Error: Request failed with status code 405 (method not allowed)

positlabs avatar Jun 11 '19 22:06 positlabs

Reading is hard sometimes. I figured it out.

Here is what I ended up with. Could add an option for setting active state.


const uploadPoster = async (imageURL, thumbURI) => {
  console.log('uploadPoster', imageURL, thumbURI)

  const thumbFilepath = `/tmp/${imageURL.split('/').pop()}`
  const thumbDownload = await axios({
    method: 'get',
    url: imageURL,
    responseType: 'stream'
  })
  await new Promise((resolve, reject) => {
    const stream = thumbDownload.data.pipe(fs.createWriteStream(thumbFilepath))
    stream.on('error', reject)
    stream.on('finish', resolve)
  })

  const createThumbOpts = {
    method: 'POST',
    url: `https://api.vimeo.com${thumbURI}`,
    headers: {
      'Accept': 'application/vnd.vimeo.*+json;version=3.4',
      'Authorization': `bearer ${env.VIMEO_ACCESS_TOKEN}`
    },
    data: fs.readFileSync(thumbFilepath),
  }
  const createThumbResponse = await axios(createThumbOpts)

  const reqOpts = {
    method: 'PUT',
    url: createThumbResponse.data.link,
    headers: {
      'Accept': 'application/vnd.vimeo.*+json;version=3.4',
      'Content-Type': 'image/' + thumbFilepath.split('.').pop(),
      'Authorization': `bearer ${env.VIMEO_ACCESS_TOKEN}`
    },
    data: fs.readFileSync(thumbFilepath),
  }
  const thumbResponse = await axios(reqOpts)

  const reqActiveOpts = {
    method: 'PATCH',
    url: `https://api.vimeo.com${createThumbResponse.data.uri}`,
    headers: {
      'Authorization': `bearer ${env.VIMEO_ACCESS_TOKEN}`,
      'Content-Type': 'application/json',
      'Accept': 'application/vnd.vimeo.*+json;version=3.4',
    },
    data: {
      active: true
    },
  }
  const thumbActiveResponse = await axios(reqActiveOpts).catch(err => console.error(err))

  return thumbActiveResponse
}

positlabs avatar Jun 11 '19 23:06 positlabs

    headers: {
      'Accept': 'application/vnd.vimeo.*+json;version=3.4',
      'Content-Type': 'image/' + thumbFilepath.split('.').pop(),
      'Authorization': `bearer ${env.VIMEO_ACCESS_TOKEN}`
    },

Actually, authorization is not required here. (It's done in the previous step; in the current step, the signature embedded in the upload URL does the trick.)

csillag avatar Jun 12 '20 15:06 csillag

how can I use it to upload thumbnail to my video. my thumbnail uri is `https://api.vimeo.com/videos/${videoId}/pictures'

majdkilou avatar Mar 18 '22 14:03 majdkilou