Last active
August 29, 2015 14:23
-
-
Save mygoare/b4a63716285f66002ab6 to your computer and use it in GitHub Desktop.
dragover & drop example
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> | |
| <html> | |
| <head> | |
| <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| <style type="text/css"> | |
| #dropzone | |
| { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: pink; | |
| box-sizing: border-box; | |
| border: 3px dashed #eee; | |
| margin: 5px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="dropzone"></div> | |
| <script type="text/javascript"> | |
| var dropzone = document.getElementById('dropzone'); | |
| dropzone.addEventListener('dragover', function(e){ | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| e.dataTransfer.dropEffect = 'copy'; | |
| }, false); | |
| dropzone.addEventListener('drop', function(e){ | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| var file = e.dataTransfer.files[0]; | |
| console.log(file); | |
| var reader = new FileReader(); | |
| reader.onload = (function(theFile) | |
| { | |
| return function(e) | |
| { | |
| document.body.innerHTML = "<img src="+e.target.result+" />"; | |
| } | |
| })(file); | |
| // reader.onload = function(e) | |
| // { | |
| // document.body.innerHTML = "<img src="+e.target.result+" />" | |
| // }; | |
| reader.readAsDataURL(file); | |
| // reader.onload = function() | |
| // { | |
| // var dataURL = reader.result; | |
| // document.body.innerHTML = dataURL; | |
| // }; | |
| // reader.readAsDataURL(file); | |
| }, false) | |
| </script> | |
| </body> | |
| </html> |
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
| # From http://jariz.github.io/vibrant.js/ | |
| dropZone = document.getElementById "drop" | |
| handleFileSelect = (event) -> | |
| event.stopPropagation() | |
| event.preventDefault() | |
| files = event.dataTransfer.files | |
| f = files[0] | |
| reader = new FileReader | |
| progress = (event) -> | |
| image = new Image(200, 200) | |
| image.src = event.target.result | |
| document.getElementById("image").innerHTML = "<img src='#{event.target.result}' />" | |
| # https://jariz.github.io/vibrant.js/ | |
| vibrant = new Vibrant(image) | |
| swatches = vibrant.swatches() | |
| for swatch of swatches | |
| if swatches.hasOwnProperty(swatch) and swatches[swatch] | |
| for el in document.querySelectorAll ".color#{swatch}" | |
| el.style.backgroundColor = swatches[swatch].getHex() | |
| parseFile = (theFile) -> progress | |
| reader.onload = parseFile(f) | |
| data = reader.readAsDataURL(f) | |
| handleDragOver = (event) -> | |
| event.stopPropagation() | |
| event.preventDefault() | |
| event.dataTransfer.dropEffect = "copy" | |
| dropZone.addEventListener "dragover", handleDragOver, false | |
| dropZone.addEventListener "drop", handleFileSelect, false |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment