Implementing delete buttons for loading jQuery files
I can approach this with a completely wrong idea, so let me explain my situation first.
What I am trying to achieve with jQuery-File-Upload allows the user to select the files they want to upload. They will be allowed to select multiple files. It doesn't matter what type yet, but mostly they will upload images. The selected files will appear in the list with a delete button to the right of the file name for each file. As shown below.
How can I implement a facility to allow the user to remove the selected file from the list of pending files?
Once the user is comfortable with their file selection, they will click the Start Download button, which will start downloading the files contained in the list and launch the progress bar pictured above.
I tried to fix the problem myself, including displaying the events that occur when the button is clicked, but I cannot remove them from the list of files selected for download. I know there is a callback drop
, but I'm not sure if this is what I should be using.
Below is my code.
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
url: '../php/',
add: function (e, data) {
//$.each(data.files, function(index, file) {
data.context = $('<li class=\"list-group-item\">')
//.html(file.name+"<button type=\"button\" id=\"drop\" class=\"btn btn-danger btn-xs pull-right\"><span class=\"glyphicon glyphicon-remove\"></span></button>")
// see https://stackoverflow.com/questions/26234279/blueimp-jquery-upload-multiple-files-doesnt-work for the reason for the line below
.html(data.files[0].name+"<button type=\"button\" id=\"drop\" class=\"btn btn-danger btn-xs pull-right\"><span class=\"glyphicon glyphicon-trash\"></span></button>")
.appendTo(".list-group");
/*$('.btn-danger').on('click', function() {
console.log('Drop '+file.name+' \n');
});*/
//});
$('.btn-danger').on('click', function(e, data) {
//console.log("Removing all objects...\n");
//data.context.remove(data.files[0].name);
//data.context.remove(data.files[0]);
e.preventDefault();
/*var filename = $(this).parent().text();
console.log("Filename: "+filename);
data.context.remove(data.files.filename);
console.log("Clicked the drop button");*/
try { // here I try thinking that I can call the drop() callback but I'm still trying to wrap my head around how this all works.
drop(e, data);
} catch(error) {
console.log("The error was: "+error);
}
});
},
submit: function (e, data) {
$('#start-upload').on('click', function() {
//$('#start-upload').addClass('#disabledInput');
console.log("This is the start upload button!");
});
},
done: function (e, data) {
/*$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo('.files').find('#panel-body');
});*/
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css(
'width',
progress + '%'
);
},
drop: function (e, data) {
$.each(data.files, function (index, file) {
//$('.btn-danger').on('click', function() {
console.log('Dropped file: '+ file.name +'\n');
//});
});
}
}).on('.fileuploadsubmit', 'click', function(e, data) {
console.log("Submit button pressed.");
//data.formData = data.context.find(':input').seralizeArray();
});
});
Finally, does it all need to be put inside mine $(document).ready
?
I realize it might be re-posting this post , but these are two questions in one where here I figured I was breaking it down into smaller issues.
source to share
Cancel loading on click event
First I must tell you that I have built something similar to you. Having reached that point, I asked myself the same questions and ended up here. Unfortunately, I had to help myself and solve it.
The main problem is that you are using the method signature for the click ( function(e, data)
) event , which will override the signature of the containing add ( function(e, data)
) method . So while you are trying to remove the data context, you are actually changing the data of the click event. So just leave the variables (or rename them) in the click event, because in your example you don't need them.
After that, you end up trying to completely "destroy" the downloads. I figured it is clean to interrupt them first and disable any subsequent transmission.
Here is some working code example that should suit your needs and contains some explanatory comments:
add: function (e, data) {
// Append data context to collection.
data.context = $('<li class="list-group-item">'+data.files[0].name+'<button class="btn btn-danger btn-xs pull-right"><i class="glyphicon glyphicon-trash"></i></button>')
.appendTo('.list-group');
// Search in the children of the data context for the button
// and register the click event.
data.context.children('button')
.click(function () {
// This button will be disabled.
$(this).addClass('disabled');
// Abort the data upload if it running.
data.abort();
// Overwrite the plugin default submit function.
data.submit = function () { return false; };
// Optional: Remove the data context (thus from collection).
//data.context.remove();
})
;
},
Additional hint: Don't use double quotes for JavaScript because you need to avoid them in your HTML markup.
How to load JavaScript
This question is much more complicated than you might expect. This is a never-ending discussion about matching / cleaning HTML markup and page loading. Choosing one direction, you find yourself in a different choice between onload events and jQuery. You should open another question or try to find a related question. By doing this, I agree that your scripts were clean anonymous function, which is automatically loaded after the document is ready: $(function() { /*yourcontent*/ });
.
source to share
According to the docs, there should be a .destroy method for the plugin, but the docs are pretty fuzzy about how to initialize it, or if it's to destroy a file from an array, or just destroy the entire form. There must be a way, at least theoretically there must be.
As for the second part, yes. Your code must be in jQuery initializer like $(document).ready
or more popular$(function() {});
source to share