Drag files from custom web pages

Drop To:

Your Web Pagex

Your Web Page

Any Web Pagex

Any Web Page

Setup

DownloadURL is a Chrome-specific mechanism that lets users drag files from web pages to the desktop, but not to other browser tabs or Windows apps.

Magic Dragin turns any DownloadURL drag into a real file delivery to any drop target.

Add a few lines of JavaScript to make any element draggable as a file. No server changes or additional SDKs required.

Create a draggable HTML element. In its dragstart handler, set DownloadURL on event.dataTransfer using this format: type:name:url.

HTML

<div id="hello-world-file" draggable>
  Drag hello-world.txt
</div>

JavaScript

const element = document.getElementById("hello-world-file");
element.addEventListener("dragstart", (event) => {
  const type = "text/plain";
  const name = "hello-world.txt";
  const url = "https://magicdragin.app/hello-world.txt";
  event.dataTransfer.setData("DownloadURL", `${type}:${name}:${url}`);
});

What the drop target receives

Without Magic Dragin

The drop target gets nothing — DownloadURL data is invisible to other pages’ JavaScript.

{
  "types": [],
  "items": [],
  "files": []
}

With Magic Dragin

The dropped file appears just like it came from the desktop. No code changes needed on the receiving page.

{
  "types": [
    "Files"
  ],
  "items": [
    {
      "kind": "file",
      "type": "text/plain"
    }
  ],
  "files": [
    {
      "name": "hello-world.txt",
      "type": "text/plain",
      "size": 30,
      "text": "Hello world from Magic Dragin."
    }
  ]
}