Getting Spotify playlist URI through drag and drop functionality

Other Questions Spotify
1

I’m trying to create a feature where users can drag playlists from Spotify and drop them into my application to get the playlist URI. Right now I have the dragging part working but the drop event doesn’t seem to trigger properly.

Here’s my current code:

function handleDragOver(){
    console.log("dragging over target");
}
function handleDropEvent(){
    console.log("item dropped");
}
var targetArea = document.getElementById("dropTarget");
targetArea.addEventListener("dragover", handleDragOver, false);
targetArea.addEventListener("drop", handleDropEvent, false);

I also added this to my manifest file but I’m not sure if the syntax is correct:

"AcceptedLinkTypes": [
    "playlist"
]

Can anyone help me figure out why the drop event isn’t working and if my manifest configuration is set up right? I need to be able to extract the playlist URI when someone drops a Spotify playlist onto my drop zone.

2

Your drop event isn’t working because you’re missing preventDefault() in your dragover handler. Browsers block drops by default unless you allow them.

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

That manifest syntax looks wrong too. For Spotify playlist drops you need:

"content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'"
}

Honestly though, drag and drop with external apps like Spotify is a pain. You’ll fight different data formats, security restrictions, and browser quirks.

I’d skip all that and automate it instead. Monitor clipboard changes or use Spotify’s Web API directly. When someone copies a playlist link, automatically extract the URI and feed it to your app.

Built something like this last year - users just paste any Spotify URL and the system handles parsing and validation automatically. Way cleaner than wrestling with drag events.

Check out Latenode for more elegant solutions: https://latenode.com

3

Yeah, the preventDefault() thing is right, but there’s another issue. Spotify playlists don’t actually pass their URIs through regular HTML5 drag and drop when you drag them from the desktop app. The dataTransfer object usually just has file paths or text - not the playlist URI you actually need.

I hit this same wall building a music management tool. What worked for me was checking event.dataTransfer.getData('text/plain') in your drop handler. Sometimes Spotify dumps the share URL there, and you can convert that to a URI by grabbing the ID part.

If you’re making a web extension, try registering protocol handlers for spotify: URIs instead of relying on drag events. That’ll work better than the current approach, though you’ll need to fix your manifest syntax for whatever platform you’re targeting.

4

drop won’t work unless u prevent the default behavior in dragover. add event.preventDefault() to ur handleDragOver fn. also, that manifest syntax looks a bit off - spotify uses different protocol handlers.

5

Your drop event isn’t working because you’re missing preventDefault() in your dragover handler. The browser won’t allow drops without it. I hit this same issue last year building something similar. Here’s what your dragover should look like: function handleDragOver(event){ event.preventDefault(); console.log("dragging over target"); }. About the manifest - that syntax is for browser extensions or desktop apps. Regular web apps don’t need manifest entries for drag and drop. If you’re actually building a Spotify app or extension though, check their dev docs for the right manifest format. One more thing - make sure your drop zone has visible dimensions and styling. Users need to see where they’re dropping. A border or background color makes a huge difference.

6

The preventDefault issue is spot on, but I hit another snag implementing this last month. Cross-origin policies block access to dragged data even after you fix the event handling. Spotify’s desktop client wraps playlist data in a way that web apps can’t access from different origins. My workaround was parsing the visual feedback text during drag operations - catch it in the dragenter event before the drop. Different OS handle Spotify drags differently too. Windows passes more usable data than macOS in my experience. If you’re still blocked, try the Spotify Web Playbook SDK instead. It gives proper API access without fighting browser security.