400 Error on Upload a Custom Playlist Cover Image

[Aztar]

Plan

Premium

Country

Australia

Device

Laptop

Operating System

API

My Question or Issue

When sending a response through the try me link for Upload a Custom Playlist Cover Image, using a correct playlist ID and OAuth Token I received a 400 error with no explanation. Is this URL link working at the moment?

I have also been attempting to do this through my own integration with the Spotify API, attempting various image formats but all of them are returning a 400 error. The only time I received a different error was when the image I was sending was over the 256k limit.

[Peter_Schorn]

Sending the request through the web console will never work because there's nowhere to put the image data. This is a bug on Spotify's end. Post the code that you used to make the request to the endpoint.

[Aztar]

Here is the code that I am using

function main() {
	// Playlist is a playlist object from spotify
	// imageBase64 is the image encoded in base 64, obtained through Jimp's getBase64Async function
	const response = setPlaylistCoverArt(playlist.href, imageBase64)
}

// Public
async function setPlaylistCoverArt(playlistHref, image) {
	const url = playlistHref + "/images";
	const response = await this.makeApiRequest(url, () => this.getJPEGHeaders(image, "PUT"))
	return response;
}

async function makeApiRequest(url, getData) {
	let response = await fetch(url, getData());
	if (response.status == 401 || response.status == 400) {
		await this.refreshAccessToken();
		return await fetch(url, getData());
	}
	return response;
}

function getHeaders(body, method) {
	const header = {
		method: method,
		headers: {
			Authorization: "Bearer " + this.accessToken,
			"Content-Type": "application/json",
		},
	};

	if (method === "POST" || method === "DELETE" || method === "PUT") {
		header.body = JSON.stringify(body);
	}

	return header;
}

function getJPEGHeaders(body, method) {
	const headers = this.getHeaders(body, method);
	headers.headers["Content-Type"] = "image/jpeg"
	return headers;
}

async function refreshAccessToken() {
	// Gets new refresh token
}

[Peter_Schorn]

Log the URL, headers and body of the request. Then share the logs with me. The body may begin with "data:image/jpeg;base64,". If so, remove it.

There are also other issues with your code.  `getHeaders` converts the body to a JSON string, but you shouldn't convert the data to a JSON string for this endpoint.

In `makeApiRequest`, you refresh the access token if the response status code is 401 or 400. This is wasteful. Instead, keep track of whether the access token is expired using the expiration date and refresh the token if it is expired before making the request. Furthermore an expired access token is not the only cause of a 400 or 401 status code.

[Aztar]

Thanks Peter. Your suggestion to remove data:image/jpeg;base64, from the front of time image data solved my problem! Also thanks for the suggestions, I will definitely add that to my code.