I decided to recreate the fileUploader (this could happen with any other pluggin inserted into the sortable table).
It was kind of easy.
Here's the code (not in jsfiddle because I would lose time making the scenario).
HTML
<table class="table">
<thead>
<tr>
<th>
Sort Order
</th>
<th>
Community Overview Image
</th>
<th>
Community Overview Image Description
</th>
</tr>
</thead>
<tbody data-bind="sortable: communityAssets">
<tr>
<td class="item">
<span data-bind="text: $index"></span>
</td>
<td class="item">
<div class="image-options">
<div class="control-group">
<div class="controls">
<img style="width:240px; height:160px;" data-bind="attr:{src: URL}"/>
</div>
<br/>
<div data-bind="attr: {id: 'fineUploader' + Name}">
</div>
</div>
</div>
<!-- .image-options -->
<a href="Javascript:void(0);" data-bind="click: $root.clearAsset ">Delete Asset</a>
</td>
<td class="item">
<textarea class="input-block-level" rows="11" cols="3" data-bind="value: Description"></textarea>
</td>
</tr>
</tbody>
</table>
Javascript:
var CommunityAsset = function(value, description, name, url) {
this.URL = url;
this.Value = value;
this.Description = ko.observable(description);
this.Name = name;
this.FileName = "";
this.FileSize = "";
}
var viewOverview = function()
{
var self = this;
self.communityAssets = ko.observableArray();
self.clearAsset = function(data, event) {
self.communityAssets.remove(data);
};
self.Uploaders = {};
self.addAsset = function() {
var name = self.communityAssets().length;
var asset = new CommunityAsset("", "", name, "http://placehold.it/240x160");
self.communityAssets.push(asset);
createFineUploader(name);
};
self.addAssetWithParams = function(value, description, name, url) {
var asset = new CommunityAsset(value, description, name, url);
self.communityAssets.push(asset);
};
self.recreateUploaders = function(arg) {
createFineUploader(arg.item.Name);
if (arg.item.FileName != "")
{
$("#fineUploader"+arg.item.Name+" .qq-upload-list").append('<li class=" alert alert-success"><span class="qq-upload-file">'+arg.item.FileName+
'</span><span class="qq-upload-size" style="display: inline;">'+arg.item.FileSize+'</span></li>');
}
function createFineUploader(intIndex)
{
vc.Uploaders[intIndex] = new qq.FineUploader({
element: $('#fineUploader'+intIndex)[0],
request: {
endpoint: '/Communities/FileUpload'
},
autoUpload: true,
sizeLimit: 4000000, // max size
validation: {
allowedExtensions: ['jpeg', 'jpg', 'gif']
},
text: {
uploadButton: '<i class="icon-upload icon-white"></i> Upload a file'
},
multiple: false,
template: '<div class="qq-uploader ">' +
'<pre class="qq-upload-drop-area "><span>{dragZoneText}</span></pre>' +
'<div class="qq-upload-button btn btn-success" style="width: auto;">{uploadButtonText}</div>' +
'<ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"></ul>' +
'</div>',
classes: {
success: 'alert alert-success',
fail: 'alert alert-error'
},
callbacks: {
onComplete: function(id, name, response) {
if (response.success)
{
var asset = ko.utils.arrayFirst(vc.communityAssets(), function(currentAsset) {
return currentAsset.Name == intIndex; // <-- is this the desired seat?
});
if (asset) {
var number = response.size;
var size = "";
if (number >= 1048576)
{
number = number / 1048576;
size = "MB";
}
else
{
number = number / 1024;
size = "kB";
}
asset.FileSize = number.toFixed(1) + "" + size;
asset.FileName = response.fileName;
asset.Value = response.path;
}
}
}
},
debug: true
});
}
};
}
var vc = new viewOverview();
ko.bindingHandlers.sortable.afterMove = vc.recreateUploaders;
ko.applyBindings(vc, $("#communityOverview")[0]);
The magic is done with ko.bindingHandlers.sortable.afterMove = vc.recreateUploaders;
So after a row is moved we recreate the the pluggin creation.
There's a portion I added of the FileName, this was done because if you uploaded a file correctly the label of the file name will be also removed if the row is moved, so this will add the FileName label back again.
Hope it helps someone!