Skip to content

Instantly share code, notes, and snippets.

@guido4000
Created May 14, 2013 09:49
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save guido4000/5574859 to your computer and use it in GitHub Desktop.
Save guido4000/5574859 to your computer and use it in GitHub Desktop.
Filepicker Drag and Drop with Meteorite loadpicker package
#exampleDropPane {
text-align: center;
padding: 20px;
background-color: #F6F6F6;
border: 1px dashed #666;
border-radius: 6px;
margin-bottom: 20px;
}
<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>
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