Created
May 14, 2013 09:49
-
-
Save guido4000/5574859 to your computer and use it in GitHub Desktop.
Filepicker Drag and Drop with Meteorite loadpicker package
This file contains 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
#exampleDropPane { | |
text-align: center; | |
padding: 20px; | |
background-color: #F6F6F6; | |
border: 1px dashed #666; | |
border-radius: 6px; | |
margin-bottom: 20px; | |
} |
This file contains 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
<head> | |
<title>testpack</title> | |
</head> | |
<body> | |
{{> home}} | |
</body> | |
<template name="home"> | |
<h1>Drop Pane</h1> | |
<div id="exampleDropPane" style="display: none">Drop Here!</div> | |
<div><pre id="localDropResult"></pre></div> | |
</template> |
This file contains 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
if (Meteor.isClient) { | |
Session.set("widgetSet", false); | |
var key = "AX8PSEzsES7qCDemGFELoz"; | |
Template.home.rendered = function () { | |
if (!Session.get("widgetSet")) { | |
var cb = function () { | |
// filepicker.constructWidget(document.getElementById('constructed-widget')); | |
filepicker.makeDropPane($('#exampleDropPane')[0], { | |
multiple: true, | |
dragEnter: function() { | |
$("#exampleDropPane").html("Drop to upload").css({ | |
'backgroundColor': "#E0E0E0", | |
'border': "1px solid #000" | |
}); | |
}, | |
dragLeave: function() { | |
$("#exampleDropPane").html("Drop files here").css({ | |
'backgroundColor': "#F6F6F6", | |
'border': "1px dashed #666" | |
}); | |
}, | |
onSuccess: function(fpfiles) { | |
$("#exampleDropPane").text("Done, see result below"); | |
$("#localDropResult").text(JSON.stringify(fpfiles)); | |
}, | |
onError: function(type, message) { | |
$("#localDropResult").text('('+type+') '+ message); | |
}, | |
onProgress: function(percentage) { | |
$("#exampleDropPane").text("Uploading ("+percentage+"%)"); | |
} | |
}); | |
document.getElementById('exampleDropPane').style.display = 'block'; | |
}; | |
loadPicker(key, cb); | |
} | |
}; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment