question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TypeError uploading a playlist cover image

See original GitHub issue

I get the following error when I try to upload a playlist cover image. Authentication is working and the scope contains "playlist-read-private", "playlist-modify-private", "playlist-modify-public", "ugc-image-upload".

TypeError: "string" must be a string, Buffer, or ArrayBuffer
    at Function.byteLength (buffer.js:481:11)
    at Request._end (/Users/user/Desktop/project/node_modules/superagent/lib/node/index.js:804:84)
    at Request.end (/Users/user/Desktop/project/node_modules/superagent/lib/node/index.js:777:15)
    at Object.HttpManager._makeRequest (/Users/user/Desktop/project/node_modules/spotify-web-api-node/src/http-manager.js:85:7)
    at HttpManager.put (/Users/user/Desktop/project/node_modules/spotify-web-api-node/src/http-manager.js:146:15)
    at /Users/user/Desktop/project/node_modules/spotify-web-api-node/src/base-request.js:92:5
    at new Promise (<anonymous>)
    at Request.execute (/Users/user/Desktop/project/node_modules/spotify-web-api-node/src/base-request.js:91:10)
    at SpotifyWebApi.uploadCustomPlaylistCoverImage (/Users/user/Desktop/project/node_modules/spotify-web-api-node/src/spotify-web-api.js:609:8)
    at addCoverToSpotifyPlaylist (/Users/user/Desktop/project/scripts/main.js:131:6)

My code

spotifyApi.uploadCustomPlaylistCoverImage('191...9Ud', '/9j/4AAQSk...KACgAoAKAP//Z')
  .then(
  (data) => { ... },
  (error) => { ... }
);

System

OS: macOS 10.13.6
Node Version: v8.12.0

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:4
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
mikiroblescommented, Oct 29, 2018

same here!

edit: I ended up implementing my own method for now:

uploadCoverImage: async function (playlistId, accessToken, base64) {
    try {
      return fetch(`https://api.spotify.com/v1/playlists/${playlistId}/images`, {
        method: "PUT", 
        mode: "cors", 
        cache: "no-cache", 
        headers: {
          "Content-Type": "image/jpeg",
          "Authorization": `Bearer ${accessToken}`
        },
        body: base64, // eg. '/9j/....'
      })
    } catch (e) {
      return {error: e}
    }
  },
0reactions
dersimncommented, Sep 27, 2020

Apparently the underlying superagent module (used here) does not output much information about this error, this is already part of another PR (see: https://github.com/visionmedia/superagent/issues/1482). This is why the error message is kinda confusing.

tl;dr:

See the diff in my personal repository on how to fix the error: https://github.com/dersimn/spotify-web-api-node/commit/57f14da2aea46bb4ea6dc6fde16c8c41785ef7be

long:

  1. Function spotifyApi.uploadCustomPlaylistCoverImage(id, base64) passes the base64 (typeof = string) to WebApiRequest.withBodyParameters(base64) (here)

  2. WebApiRequest.withBodyParameters(base64) (here) itself is a call to WebApiRequest._assigner('bodyParameters')(base64) which destructs the String by this for-loop into an object looking like:

{
    '0': 'd',
    '1': 'a',
    '2': 't',
    '3': 'a',
    '4': ':',
    '5': 'i',
    '6': 'm',
    '7': 'a',
    '8': 'g',
    '9': 'e',
    '10': '/',
    '11': 'j',
    '12': 'p',
    '13': 'e',
    '14': 'g',
    '15': ';',
    '16': 'b',
    '17': 'a',
    '18': 's',
    '19': 'e',
    '20': '6',
    '21': '4',
    '22': ',',
    '23': '/',
    '24': '9',
    '25': 'j',
    '26': '/',
    '27': '4',
    '28': 'A',
    '29': 'A',
    '30': 'Q',
    '31': 'S',

Note: My String starts with data:image/jpeg;base64. this is wrong. The Spotify API expects the string to start right with /9j/j/4.... I’m just too lazy to reproduce the error again (I’m happy that I found the issue after 2h or so)…

  1. The request with now typeof this.bodyParameters => object ends up in HttpManager (which utilises superagent) and is passed to superagent.send(base64AsFuckedUpObject) and causes the error when superagent.end() is invoked here.
Read more comments on GitHub >

github_iconTop Results From Across the Web

How do I upload a custom playlist cover image with Spotify API
I'm downloading pictures from Spotify before uploading them to new playlist. // Legacy code not optimized used to gather Spotify cover img ...
Read more >
Can't Upload a new Image to my Spotify Playlist an...
I am not able to change the cover of a new made playlist anymore. Since the last update it doesn't work anymore. I...
Read more >
Solved: Re: TypeError: Error #1085: Actionscript 3 videopl... - Adobe ...
I have a videoplayer that loads video from xml and players it. The code works well when loading the xml. But because I...
Read more >
AudioPlayer Interface Reference | Alexa Skills Kit
For version 1.0 of a music skill that doesn't yet support playlists and ... AudioPlayer with custom background image, title, subtitle, and album...
Read more >
How to Fix the 'Preview Could Not Be Loaded' Error - Elementor
For example in the image below, it says “Preview Debug”. ... the front-end it can cause loading issues, These URLs can be checked...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found