How to obtain Spotify playlist URI using drag and drop?

[alexj]

I’m working on a feature that allows users to drag Spotify playlists into my app to retrieve their URIs. I got the dragging action set up well, but I’m struggling with the dropping part.

This is my current implementation:

function onDragOver(evt) {
    evt.preventDefault();
    console.log("dragging...");
}

function onDrop(evt) {
    evt.preventDefault();
    console.log("playlist dropped");
}

const playlistArea = document.getElementById("playlist-container");
playlistArea.addEventListener("dragover", onDragOver, false);
playlistArea.addEventListener("drop", onDrop, false);

Additionally, I made some changes to my manifest, but I’m uncertain if they are right:

"AcceptedLinkTypes": [
    "playlist"
]

The drag event is working fine, yet the drop event doesn’t seem to be getting triggered. What steps should I take to successfully access the playlist URI when a user drops a Spotify playlist? Is there something I overlooked in the event handling or the manifest?

[bellagarcia]

you gotta add the dataTransfer part in ur drop function. try including const data = evt.dataTransfer.getData('text/uri-list'); to really get that spotify uri when it drops. and make sure ur browser actually supports spotify drag/drop - not all do.

[Hazel_27Yoga]

That manifest config looks off to me. I’ve hit similar Spotify integration issues - AcceptedLinkTypes isn’t the right approach for web apps. That’s more for desktop apps or Spotify extensions.

For web drag and drop, focus on handling the dataTransfer object instead. Also make sure you’re testing in the right environment - browsers often block cross-origin drag operations.

Try logging evt.dataTransfer.types in your drop handler to see what’s actually being transferred. Spotify URLs usually come through as ‘text/plain’ or ‘text/uri-list’, not filtered by manifest settings.

[John_Fast]

Drop events not firing? It’s usually the dragenter handler. The browser won’t see your element as a valid drop target without it. I hit this same issue building something similar last year. Add this: function onDragEnter(evt) { evt.preventDefault(); } playlistArea.addEventListener(“dragenter”, onDragEnter, false); Also make sure you’re dragging from Spotify’s web player, not the desktop app - they handle drag operations completely differently. The web player will give you the URI in dataTransfer once you’ve got all four drag events set up (dragenter, dragover, dragleave, drop). Ditch that manifest config entirely - you don’t need it for web drag and drop.