').attr({
'class': 'upload-data pending ui-widget-content ui-corner-all',
id: 'pxupload'+ itr +'_text'
})
.data('formId', 'pxupload'+ itr)
.append(' \
\
'+ filename +' \
\
Pending...
\
')
);
//Store input in form
$form.data('input', $this);
$form.appendTo(pxUploadForm + ' #pxupload'+ itr +'_text');
//hide the input file
px.hideInputFile( $form );
//increment for printing form
itr++;
//print form
px.printForm();
//Callback on file Changed
config.onFileChange($this, $form);
if (!isHtml5) {
afterUploadChange();
}
}
/*
* After upload change triggers autoupload
*/
function afterUploadChange() {
if (config.autoUpload) {
//Display Cancel Button
toogleCancel(true)
stopUpload = false;
//Queue and process upload
uploadQueue();
}
}
/*
* Queue Upload and send each form to process upload
*/
function uploadQueue() {
//stop all upload
if (stopUpload) {
return;
}
totalForm = $(pxUploadForm + ' form').parent('.upload-data').get().length;
if (totalForm > 0) {
pendingUpload = $(pxUploadForm + ' form').parent('.upload-data').get(0);
$form = $(pendingUpload).children('form');
//before upload
beforeEachUpload( $form );
if (isHtml5) {
//Upload Using Html5 api
html5Upload( $form );
} else {
//upload using iframe
iframeUpload( $form );
}
} else {
config.afterUpload(pxUploadForm);
//Revert Button to clear
toogleCancel(false);
}
}
/*
* Process form Upload
*/
function html5Upload($form) {
file = $form.data('input');
if (file) {
var fd = new FormData();
fd.append($form.find(selector).attr('name'), file);
//get other form input and append to formData
$form.find(':input').each(function() {
if (this.type != 'file') {
fd.append($(this).attr('name'), $(this).val());
}
});
//show progress bar
$uploadData = $form.parent();
$uploadData.find('.progress').show();
$progressBar = $uploadData.find('.progressBar');
$percentage = $uploadData.find('.percentage');
//Upload using jQuery AJAX
jqxhr = $.ajax({
url: $form.attr('action'),
data: fd,
cache: false,
contentType: false,
processData: false,
type: 'POST',
xhr: function() {
var req = $.ajaxSettings.xhr();
if (req) {
req.upload.addEventListener('progress',function(ev){
//Display progress Percentage
progress = Math.round(ev.loaded * 100 / ev.total);
$percentage.text(progress.toString() + '%');
$progressBar.progressbar({
value: progress
});
}, false);
}
return req;
}
})
.success(function(data) {
afterEachUpload($form.attr('id'), data );
})
.error(function(jqXHR, textStatus, errorThrown) {
afterEachUpload($form.attr('id'), null, textStatus, errorThrown );
})
.complete(function(jqXHR, textStatus) {
$progressBar.progressbar({
value: 100
});
$percentage.text('100%');
uploadQueue();
});
}
$form.remove();
}
/*
* Iframe Upload Process
*/
function iframeUpload($form) {
//show progress bar
$uploadData = $form.parent();
$uploadData.find('.progress').show();
$percentage = $uploadData.find('.percentage');
$progressBar = $uploadData.find('.progressBar');
pcount = 0;
dummyProgress($progressBar, $percentage);
$form.submit();
var id = pxWidget + ' #' + $form.attr('id');
$(id +'_frame').load(function(){
data = $(this).contents().find('body').html();
afterEachUpload($form.attr('id'), data);
clearTimeout ( progressTime );
progress = 100;
$percentage.text(progress.toString() + '%');
$progressBar.progressbar({
value: progress
});
uploadQueue();
});
}
/*
* Show the progress bar to the user
*/
function dummyProgress($progressBar, $percentage) {
if (percentageInterval[pcount]) {
progress = percentageInterval[pcount] + Math.floor( Math.random() * 5 + 1 );
$percentage.text(progress.toString() + '%');
$progressBar.progressbar({
value: progress
});
}
if (timeInterval[pcount]) {
progressTime = setTimeout(function(){
dummyProgress($progressBar, $percentage)
}, timeInterval[pcount] * 1000);
}
pcount++;
}
/*
* before Upload
*/
function beforeAllUpload() {
//trigger before upload callback
$continue = config.beforeUpload(e, pxButton);
if ($continue === false) {
return false;
}
//Show Cancle Button
toogleCancel(true);
//process and queue upload
uploadQueue();
}
/*
* Before Each file is uploaded
*/
function beforeEachUpload($form) {
//trigger before upload callback
config.beforeEachUpload($form);
$uploadData = $form.parent();
$uploadData.find('.status').text('Uploading...');
$uploadData.removeClass('pending').addClass('uploading');
$uploadData.find('.delete').removeClass('delete').addClass('cancel').attr('title', 'Cancel');
}
/*
* After Each file is uploaded
*/
function afterEachUpload(formId, data, status, errorThrown) {
if (data) {
data = $('
').append(data);
status = $(data).find('#status').text();
}
formId = pxWidget + ' #' + formId;
$uploadData = $(formId + '_text');
if (status == 'success'){
$uploadData.removeClass('uploading').addClass('success');
$uploadData.children('.status').html( $(data).find('#message').text() );
} else if (status == 'error'){
$uploadData.removeClass('uploading').addClass('error');
//if client side error other display error from backend
if (errorThrown) {
$uploadData.children('.status').html( errorThrown );
} else {
$uploadData.children('.status').html( $(data).find('#message').text() );
}
} else if (status == 'abort') {
$uploadData.removeClass('uploading').addClass('cancel');
$uploadData.children('.status').html( 'Cancelled' );
}
$uploadData.find('.cancel').removeClass('cancel').addClass('delete').attr('title', 'Delete');
//hide progress bar
$uploadData.find('.progress').hide();
//trigger after each upload
config.afterEachUpload(data, status, $uploadData);
$(formId).remove();
$(formId + '_frame').remove();
}
/*
* Toggle Cancel/Delete button
*/
function toogleCancel(cancel) {
if (cancel) {
//store button clear id
buttonClearId = $(config.buttonClear, pxButton).attr('id');
//Cancel Button
$(config.buttonClear, pxButton).attr({ id: 'px-cancel', title: 'Cancel' });
} else {
//Clear button
$('#px-cancel', pxButton).attr({ id: buttonClearId, title: 'Clear' });
}
}
/*
* Onlick submit button: start upload
*/
$(config.buttonUpload, pxButton).click(function(){
stopUpload = false;
beforeAllUpload();
});
/*
* Individual Upload
*/
$('.upload', pxUploadForm).live('click', function(){
$form = $(this).parents('.upload-data').children('form');
if ($form.length > 0) {
//Show Cancle Button
toogleCancel(true);
//before upload
beforeEachUpload( $form );
if (isHtml5) {
//Upload Using Html5 api
html5Upload( $form );
} else {
//upload using iframe
iframeUpload( $form );
}
stopUpload = true;
}
});
//Button Clear Event
$(config.buttonClear, pxButton).live('click', function(){
$(pxUploadForm).fadeOut('slow',function(){
$(this).empty();
$(this).show();
$(pxUploadFormInput).empty();
itr = 1; //reset iteration
limit = parseInt(config.limit);
//print the First form
px.printForm();
//disable button
$(buttonM).attr('disabled','disabled');
});
});
$('.delete', pxUploadForm).live('click', function(){
limit++;
var id = pxWidget + ' #' + $(this).parents('.upload-data').data('formId');
$(id+'_text').fadeOut('slow',function(){
$(id+'_frame').remove();
$(this).remove();
//disable button
if ($(pxUploadForm).find('form').length <= 1) {
$(buttonM).attr('disabled','disabled');
}
});
//on file remove callback
config.onFileRemove(this);
});
/*
* Cancel individual upload
*/
$('.cancel', pxUploadForm).live('click', function() {
if (jqxhr) {
jqxhr.abort();
}
if (!isHtml5) {
$form = $(this).parents('.upload-data').children('form');
$form.remove();
afterEachUpload($form.attr('id'), null, 'abort', 'Cancelled');
}
});
/*
* Cancel all uploads
*/
$('#px-cancel', pxButton).live('click', function(){
stopUpload = true;
if (jqxhr) {
jqxhr.abort();
}
$('form', pxUploadForm).each(function(){
afterEachUpload($(this).attr('id'), null, 'abort', 'Cancelled');
});
//Show Clear Button
toogleCancel(false);
});
/* Icons hover */
$(".px-widget .actions li").live("mouseover mouseout", function(event) {
if ( event.type == "mouseover" ) {
$(this).addClass('ui-state-hover');
} else {
$(this).removeClass("ui-state-hover");
}
});
return this;
}
})(jQuery);