Jqueryfileupload BlueImp Multiple file uploads with sendAPI - php

Question

I am trying to send multiple files with one ajax call .
THe problem is i cant get my progress work out getting this line
TypeError: data.context is undefined
data.context.find('input').val(progress).change();
Cant figure out how to manage progress for each tpl with sendAPI >?I searched a lot try out different thing the basic reason for doing this is i want one ajax request and to have control after that request completes .
MYHTML
<form id="upload" method="post" action="upload.php" enctype="multipart/form-data">
<div>
<div id="drop">
Drop Here <span style="color:white;text-transform:none;font-size: 13px"> OR <span>
<a>Browse</a>
<input type="file" name="upl[]" multiple/>
</div>
<ul>
<!-- The file uploads will be shown here -->
</ul>
</div>
</form>
MY JQUERY
// Initialize the jQuery File Upload plugin
$('#upload').fileupload({
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator && navigator.userAgent),
imageMaxWidth: 100,
imageMaxHeight: 100,
maxFileSize: 5000000,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
dropZone: $('#drop'),
add: function(e, data) {
var type = data.files[0].type;
var size = data.files[0].size;
if ( type == 'image/jpeg' || type == 'image/png' || type == 'image/gif' ) {
if(size<=350000000)
{
// var preview = '<img src="' + URL.createObjectURL(data.files[0]) + '"/>';
var tpl = $('<li class="working"><input type="text" value="0" data-width="48" data-height="48"' +
' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><div class="preview"></div><p></p><span></span></li>');
tpl.find('p').text(data.files[0].name).append('<i>' + formatFileSize(data.files[0].size) + '</i>');
loadImage(data.files[0],
function(img) {
tpl.find('.preview').html(img);
},
{
minWidth: 80,
minHeight: 60, maxWidth: 80, maxHeight: 60, contain: true} // Options
);
// Add the HTML to the UL element
data.context = tpl.appendTo(ul);
// Initialize the knob plugin
tpl.find('input').knob();
// Listen for clicks on the cancel icon
tpl.find('span').click(function() {
if (tpl.hasClass('working')) {
jqXHR.abort();
}
tpl.fadeOut(function() {
tpl.remove();
});
});
myfiles.push(data.files[0]);
} else{
noty({type:'error',text: 'file exceeds limit of 350Kb'});
}//check for file type
} else
{
noty({type:'error',text: 'Invalid file type.Please make sure image has valid extension jpeg|gif|jpg'});
}
// $('#post_picture').on('click',function(){
//
//
//
// var jqXHR = data.submit().success(function (result, textStatus, jqXHR) {ar.push(result)});
//
//
// tpl.fadeOut(function() {
// tpl.remove();
// });
// $('#post_picture').off('click');
//
//
//
// });
},
complete:function(e,data)
{
},
progress: function(e, data) {
// Calculate the completion percentage of the upload
var progress = parseInt(data.loaded / data.total * 100, 10);
// Update the hidden input field and trigger a change
// so that the jQuery knob plugin knows to update the dial
data.context.find('input').val(progress).change();
if (progress == 100) {
data.context.removeClass('working');
}
},
fail: function(e, data) {
// Something has gone wrong!
data.context.addClass('error');
}
});
$(document).on('click','#post_picture',function(){
alert('asdas');
$('#upload').fileupload('send', {files: myfiles});
});

Answer 1

This is how i did it Why do these days no body answers :)
var myfiles = [];
// Initialize the jQuery File Upload plugin
$('#upload').fileupload({
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator && navigator.userAgent),
imageMaxWidth: 100,
imageMaxHeight: 100,
maxFileSize: 5000000,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
dropZone: $('#drop'),
add: function(e, data) {
var type = data.files[0].type;
var size = data.files[0].size;
if (type == 'image/jpeg' || type == 'image/png' || type == 'image/gif') {
if (size <= 350000000)
{
// var preview = '<img src="' + URL.createObjectURL(data.files[0]) + '"/>';
var tpl = $('<li class="working"><input type="text" value="0" data-width="48" data-height="48"' +
' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><div class="preview"></div><p></p><span></span></li>');
tpl.find('p').text(data.files[0].name).append('<i>' + formatFileSize(data.files[0].size) + '</i>');
loadImage(data.files[0],
function(img) {
tpl.find('.preview').html(img);
},
{
minWidth: 80,
minHeight: 60, maxWidth: 80, maxHeight: 60, contain: true} // Options
);
// Add the HTML to the UL element
data.context = tpl.appendTo(ul);
// Initialize the knob plugin
tpl.find('input').knob();
// Listen for clicks on the cancel icon
tpl.find('span').click(function() {
if (tpl.hasClass('working'))
{
data='';
}
tpl.fadeOut(function() {
tpl.remove();
});
});
// myfiles.push(data.files[0]);
} else {
noty({type: 'error', text: 'file exceeds limit of 350Kb'});
}//check for file type
} else
{
noty({type: 'error', text: 'Invalid file type.Please make sure image has valid extension jpeg|gif|jpg'});
}
$('#post_picture').on('click', function() {
if(data!='')
{
var jqXHR = data.submit().success(function(result, textStatus, jqXHR) {
});
}
tpl.fadeOut(function() {
tpl.remove();
});
$('#post_picture').off('click');
});
},
stop: function(e) {
console.log(myfiles);
},
progress: function(e, data) {
// Calculate the completion percentage of the upload
var progress = parseInt(data.loaded / data.total * 100, 10);
// Update the hidden input field and trigger a change
// so that the jQuery knob plugin knows to update the dial
data.context.find('input').val(progress).change();
if (progress == 100) {
data.context.removeClass('working');
}
},
fail: function(e, data) {
// Something has gone wrong!
data.context.addClass('error');
}
}).on('fileuploaddone', function(e, data) {
myfiles.push(data.result);
});