У меня возникли проблемы с работой моей «панели перетаскивания» filepicker.io с использованием javascript. У меня уже был HTML-виджет filepicker.io, работающий примерно так:
<input type="filepicker-dragdrop" data-fp-drag-class="filepicker_dragdrop"/>
Однако у меня возникают проблемы с вызовом filepicker.io из JavaScript. Когда я перетаскиваю файл в контейнер div.filepicker_dragdrop, ничего не происходит. есть идеи?
В моей форме .html.erb:
<div class="filepicker_dragdrop"></div>
В моем файле .css:
.filepicker_dragdrop {
padding: 8px;
height: 100px;
width: 100%;
text-align: center;
margin: auto;
border: 1px dashed #aaa;
border-radius: 5px;
background-color: #fff;
}
В моем файлеpicker_dragdrop.js:
filepicker.makeDropPane($('.filepicker_dragdrop')[0], {
multiple: true,
dragEnter: function() {
$(".filepicker_dragdrop").html("Drop to upload").css({
'backgroundColor': "#E0E0E0",
'border': "1px solid #000"
});
},
dragLeave: function() {
$(".filepicker_dragdrop").html("Drop files here").css({
'backgroundColor': "#F6F6F6",
'border': "1px dashed #666"
});
},
onSuccess: function(fpfiles) {
$(".filepicker_dragdrop").text("Done, see result below");
$("#localDropResult").text(JSON.stringify(fpfiles));
},
onError: function(type, message) {
$("#localDropResult").text('('+type+') '+ message);
},
onProgress: function(percentage) {
$(".filepicker_dragdrop").text("Uploading ("+percentage+"%)");
}
});