I am using spotify’s api to create a playlist, add tracks and change the custom playlist cover image in quick succession. The createPlaylist() and populatePlaylist() functions work perfectly, even in quick succession. But the changePicture() function returns a 404 error.

Just to be clear, yes I did add “ugc-image-upload” in my scopes.

Main function

export const savePlaylist = async (token: string, spotifyUserId: string, body: any) => {
    const playlistInfo = await createPlaylist(token, spotifyUserId, body);

    // CHECKING IF THE ID TRULY EXISTS
    console.log("Playlist created with ID:", playlistInfo.id);

    await populatePlaylist(token, playlistInfo.id, body.tracks);

    // THIS ONLY WORKS WHEN USING A STATIC ID INSTEAD OF PLAYLISTINFO.ID
    const changePictureResult = await changePicture(playlistInfo.id, token);
    if (!changePictureResult) {
        console.error("Failed to change playlist picture.");
    }

    console.log("Playlist picture changed.");

    return playlistInfo;
}

CreatePlaylist function

const createPlaylist = async(token: string, userId:string, body:any) => {
    let url = `https://api.spotify.com/v1/users/${userId}/playlists`
    let axiosbody = {
        "name": body.title || "Custom Mix for you",
        "description": body.description || `This playlist was created specifically for you.`,
        "public": body.public || false,
        "collaborative": false
    }

    let result = await axios.post(url, axiosbody, {
        headers: {
        "Content-Type": "application/json",
        "Authorization": `Bearer ${token}`
        }
    }).catch(error => console.error(error));

    if(!result) return null;
    return result.data;
}

changePicture function

const changePicture = async (playlistId:string, token:string) => {
    let base64Image = await convertBase64("Playlistcover_1.jpg")
    let url = `https://api.spotify.com/v1/playlists/${playlistId}/images`;
    let result = await axios.put(url, base64Image, {
        headers: {
            "Content-Type": "image/jpeg",
            "Authorization": `Bearer ${token}`
        }
    }).catch(error => console.error(error))

    if(!result) return false;
    return result.data;
}