Getting Spotify playlist URI through drag and drop functionality

Other Questions Spotify
1

I’m trying to implement a feature where users can drag playlists from Spotify and drop them into my application to get the playlist URI. The dragging part works fine, but the drop event doesn’t seem to trigger properly.

Here’s my current implementation:

function handleDragOver(event) {
    event.preventDefault();
    console.log("dragging over target");
}

function handleDropEvent(event) {
    event.preventDefault();
    console.log("item dropped");
}

var targetArea = document.querySelector(".drop-zone");
targetArea.addEventListener("dragover", handleDragOver, false);
targetArea.addEventListener("drop", handleDropEvent, false);

In my manifest file, I have this configuration:

"AcceptedLinkTypes": [
    "playlist"
]

Can someone help me figure out what I’m missing? Is there a specific way to handle Spotify playlist drops to extract the URI correctly?

2

check your browser console for errors when you drop. could be cross-origin restrictions or your app isn’t registered as a drop target. try adding event.dataTransfer.dropEffect = 'copy' in your dragover handler - might fix the drop event.

3

Had the same issue building my music tool last year. You probably need to handle the dragenter event and style your drop zone so users know it accepts drops. Also check if you’re pulling the URI correctly from the data transfer object. Spotify URIs usually come through event.dataTransfer.getData('text/uri-list') or sometimes event.dataTransfer.getData('text/plain'). I’d add some debugging to see what’s actually getting transferred when you drop the playlist. And make sure your app’s registered to handle Spotify links in your manifest - sometimes the link type config needs to be more specific than just “playlist”.