-
-
Save thingsinjars/1448818 to your computer and use it in GitHub Desktop.
Attach a handler to generate a draggable file on the fly
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 | |
| ) | |
| } | |
| ) | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function(a,b,c){a.addEventListener("dragstart",function(e){e.dataTransfer.setData("DownloadURL","text/html:"+b+":data:;base64,"+btoa(c))})} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "dragFile", | |
| "description": "Attaches a handler to generate a draggable file on the fly", | |
| "keywords": [ | |
| "drag", | |
| "file", | |
| "event" | |
| ] | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
without passing false for the capture phase it will error in Firefox.
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
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.