I want to clone a html control and then append to another control.
I have written code
ko.bindingHandlers.multiFileUpload = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var options = ko.utils.unwrapObservable(valueAccessor()),
controlId = ko.utils.unwrapObservable(options.controlId);
//primaryKey = ko.utils.unwrapObservable(options.primaryKey);
var progressMonitorID = controlId + '-ProgressMonitor';
var progressIndicatorID = controlId + '-ProgressIndicator';
$(element).after('<div id=' + progressMonitorID + ' class="progress progress-striped active">'
+ '<div id=' + progressIndicatorID + ' class="bar" style="width: 0%;"></div>'
//+ '<input type="hidden" id="imageKey_"' + controlId + ' name="imageKey" value=' + primaryKey + '></div>'
+ '</div>');
$('#' + progressMonitorID).hide();
$('#' + progressIndicatorID).hide();
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var options = ko.utils.unwrapObservable(valueAccessor()),
imageKey = ko.utils.unwrapObservable(options.imageKey),
imageForeighKey01 = ko.utils.unwrapObservable(options.imageForeighKey01),
uploadUrl = ko.utils.unwrapObservable(options.uploadUrl),
controlId = ko.utils.unwrapObservable(options.controlId),
refreshUri = ko.utils.unwrapObservable(options.refresh),
formName = ko.utils.unwrapObservable(options.formName);
var progressMonitorID = controlId + '-ProgressMonitor';
var progressIndicatorID = controlId + '-ProgressIndicator';
var formID = controlId + '-form';
var fileInputID = controlId + '-fileInput';
if (uploadUrl) {
$(element).change(function () {
if (element.files.length) {
var $this = $(this),
fileName = $this.val();
// var formData = new FormData($('#' + formName)[0]);
var $form = $('<form enctype="multipart/form-data" id=' + formID + '></form>');
// $form.append('<input id=' + fileInputID + 'name=' + fileInputID + ' type="file" />');
$form.append('<input type="hidden" id="imageKey_"' + controlId + ' name="imageKey" value=' + imageKey + '>');
$form.append('<input type="hidden" id="imageForeignKey_"' + controlId + ' name="imageForeighKey01" value=' + imageForeighKey01 + '>');
$("#" + controlId).clone().appendTo($form);
$form.hide();
$('body').append($form);
var formData = new FormData($($form)[0]);
$.ajax({
url: uploadUrl,
type: 'POST',
// Form data
data: formData,
//Options to tell JQuery not to process data or worry about content-type
cache: false,
contentType: false, //'multipart/form-data',
processData: false,
xhr: function () {
var xhr = new window.XMLHttpRequest();
//Upload progress
xhr.upload.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total * 100 + "%";
//Do something with upload progress
$('#' + progressMonitorID).show();
$('#' + progressIndicatorID).width(percentComplete);
//alert(percentComplete);
}
}, false);
return xhr;
}
})
.done(function (data, textStatus, jqXHR) {
if (refreshUri) {
//alert("success");
//var path = '../MapView/DownloadMap?ref=' + Math.random();
var path = refreshUri + 'ref=' + Math.random();
options.refresh(path);
}
})
.fail(function (jqxhr, status, errorMsg) { alert("Status : " + status + " Error :" + errorMsg); })
.always(function () {
// alert("complete");
$('#' + progressMonitorID).hide();
$('#' + progressIndicatorID).hide();
$('#' + formID).remove();
});
}
});
}
}
}
and html binding is
<input type="file" tabindex="9"
data-bind="attr: {
id: 'RoadMap' + $index(), name: 'RoadMap' + $index()
},
multiFileUpload: {
controlId: 'RoadMap' + $index(),
formName: 'frmPage3a',
imageKey: StageDetailID,
imageForeighKey01: CourseInfoRoadID,
uploadUrl: '/api/Image/UploadMapFile'
}
" />
this code works very fine into FireFox browser but not work in IE and Chrome.here the problem is .clone() method of jquery. Is it possible? Thanks.
