need help: custom submit button for all files and cancel buttons for each file

[Yurii yurik]

hello

i'm new to this plugin but got it running. i don't use plus UI, just simple installation. Can you suggest best solution to:

1. make single button upload. I cannot get how to send all files at the same time via custom button click

2. make custom cancel button for each file, so element will be removed from list and upload queue too. 

-  - - - html - - -

<input id="fileupload" type="file" name="files[]" multiple="multiple" style="display: none;" directory webkitdirectory mozdirectory />

<a href="#" class="btn_upload_media">upload media</a> <br /> <br />

<table id="project_media_list">

<thead>

<tr>

<th>preview</th>

<th>name</th>

<th>type</th>

<th>size</th>

<th style="width: 100px">status</th>

<th>action</th>

</tr>

</thead>

<tbody>

....

- - - script - - - -

jQuery('#fileupload').fileupload({        

url: upload_url,

multipart: false,

maxChunkSize: 1000000, //1 MB

dataType: 'json',

autoUpload: false,

//acceptFileTypes:  /(\.|\/)(gif|jpg|jpe?g|png)jQuery/i,

maxFileSize: 5000000, //5 MB

//dynamic preview

disableImageResize: false,

previewMaxWidth: 100,

previewMaxHeight: 100,

previewCrop: true

}) // set configuration

.on('fileuploadadd', function (e, data) {

data.context = jQuery('<tr/>').appendTo('#project_media_list > tbody').addClass('row0'); //row0 - joomla hover

jQuery(data.context).append(new Array(7).join('<td/>'));

   

jQuery.each(data.files, function (i, file) {

jQuery('td:eq(1)', data.context).text(file.name);

jQuery('td:eq(2)', data.context).text(file.type);

jQuery('td:eq(3)', data.context).text((file.size/1024).toFixed(2) + ' kb');

jQuery('td:eq(5)', data.context).append(jQuery('<a href="#"/>').addClass('btn_cancel_media').text('cancel'));

}); //each

    }) //on individual add

.on('fileuploadprocessalways', function (e, data) {

var node = jQuery(data.context[data.index]);

var file = data.files[data.index];

jQuery('td:eq(0)', node).append(file.preview);

jQuery('td:eq(4)', node).append(file.error ? file.error : 'ready for upload');

}) //on process-always

.on('fileuploadprogress', function (e, data) {

var node = data.context;

var progress = parseInt(data.loaded / data.total * 100, 10);

if(!(jQuery('td:eq(4) > .progress-bar > .progress', node).length > 0)) {//create progress bar

//console.log('create bar');

jQuery('td:eq(4)', node).html(jQuery('<div/>').addClass('progress-bar').append(jQuery('<div/>').addClass('progress')));

}

jQuery('td:eq(4) > .progress-bar > .progress', node).css('width', progress + '%');

}) // on individual progress

.on('fileuploadprogressall', function (e, data) {

})

.on('fileuploaddone', function (e, data) {

jQuery.each(data.result.files, function (i, file) { //feedback from server

jQuery('td:eq(1)', data.context[i]).html(jQuery('<a/>').attr('target', '_blank').prop('href', file.url).text(file.name)); //link

jQuery('td:eq(4)', data.context[i]).append(jQuery('<span/>').css('color', 'green').text('uploaded')); //text

setTimeout(function(){jQuery('td:eq(4) > .progress-bar', data.context[i]).remove();}, 1000); //remove bar

});

})//on done

.on('fileuploadfail', function (e, data) {

$.ajax({//remove failed chunk file

url: upload_url,

dataType: 'json',

data: { file: data.files[0].name },

type: 'DELETE'

});

/*jQuery.each(data.result.files, function (index, file) {

            var error = jQuery('<span/>').text(file.error);

            jQuery(data.context.children()[index])

                .append('<br>')

                .append(error);

        });*/

    });

jQuery('.btn_cancel_media').live('click', function(e){

e.preventDefault();

jQuery(this).closest('tr').remove();

//TODO: how remove from upload list?

});

jQuery('.btn_delete_media').live('click', function(e){

e.preventDefault();

$.ajax({//remove failed chunk file

url: upload_url,

dataType: 'json',

//data: { file: data.files[0].name }, //TODO: get name from list

type: 'DELETE'

});

//on success jQuery(this).closest('tr').remove();

});

jQuery('.btn_upload_media').live('click', function(e){

//TODO: how start uploading all files?

});

regards