How to create multiple drop pane on same page using filepicker.io -
basically have table , each rows have image icon want turn drop pane. example code helpful.
working example: http://jsfiddle.net/krystiangw/mb4o7kfc/1/
js file:
$('td').each(function(e, element){ filepicker.makedroppane( element, { multiple: true, dragenter: function() { $(element).html("drop upload").css({ 'backgroundcolor': "#e0e0e0", 'border': "1px solid #000" }); }, dragleave: function() { $(element).html("drop files here").css({ 'backgroundcolor': "#f6f6f6", 'border': "1px dashed #666" }); }, onsuccess: function(blobs) { $(element).text(json.stringify(blobs)); }, onerror: function(type, message) { $(element).text('('+type+') '+ message); }, onprogress: function(percentage) { $(element).text("uploading ("+percentage+"%)"); } } ); });
html file:
<table id="mytable" class="table table-bordered"> <tr> <th> drag&drop panel </th> </tr> <tr> <td> drop files here </td> </tr> <tr> <td> or here </td> </tr> <tr> <td> or here </td> </tr> </table>
Comments
Post a Comment