Skip to content

Instantly share code, notes, and snippets.

@thingsinjars
Forked from 140bytes/LICENSE.txt
Created December 8, 2011 21:56
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thingsinjars/1448818 to your computer and use it in GitHub Desktop.
Save thingsinjars/1448818 to your computer and use it in GitHub Desktop.
Attach a handler to generate a draggable file on the fly
function(element,filename,content){
element.addEventListener("dragstart", // Attach to the dragstart event
function(evt){ // Handler for the event
evt.dataTransfer.setData(
"DownloadURL", // Type of drag - DownloadURL in this case
"text/html:" // Type of file we're generating
+ filename // name for the new file
+ ":data:;base64," // to convince the browser this is binary data
+ btoa(content) // The actual content you want in the file
)
}
)
}
function(a,b,c){a.addEventListener("dragstart",function(e){e.dataTransfer.setData("DownloadURL","text/html:"+b+":data:;base64,"+btoa(c))})}
DO WHATEVER YOU MIGHT WISH TO PUBLIC LICENSE
Version 1, December 2011
Copyright (C) 2011 SIMON MADINE <http://thingsinjars.com>
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHATEVER YOU MIGHT WISH TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. You just DO WHATEVER YOU MIGHT WISH TO.
{
"name": "dragFile",
"description": "Attaches a handler to generate a draggable file on the fly",
"keywords": [
"drag",
"file",
"event"
]
}
<!DOCTYPE html>
<title>Create a file on the fly</title>
<p>This test page is a quine.</p>
<div>Drag this: <b id="ret" draggable=true>Quine</b></div>
<script>
var myFunction = function(a,b,c){a.addEventListener("dragstart",function(e){e.dataTransfer.setData("DownloadURL","text/html:"+b+":data:;base64,"+btoa(c))})}
myFunction(document.getElementById( "ret" ), "140test.html", "<!DOCTYPE html>"+document.all[0].innerHTML); //Kinda cheating with the doctype here...
</script>
@thingsinjars
Copy link
Author

This will work when attached to any element which is draggable by default (image, link, selection) but other elements need to have draggable=true set on them. I'm wondering if there's any space to squeeze assigning that attribute to the specified element.

Probably not, seeing as addEventListener, dataTransfer and setData by themselves take up 35 bytes.

@jdalton
Copy link

jdalton commented Dec 16, 2011

without passing false for the capture phase it will error in Firefox.

@thingsinjars
Copy link
Author

True but the DownloadURL type also doesn't work in Firefox. If there's any way to squeeze in the full code required for Firefox draggable files, it might still run into problems if it's not run as privileged code.

I'd love to find a fully compatible solution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment