Implementing Remove Buttons For Jquery-file-upload

I may be approaching this with an entirely wrong idea so let me explain my situation first. What I'm trying to achieve using jQuery-File-Upload is to allow the user to select fil

Solution 1:

Abort from upload by click event

First I need to tell you, that I've built something similar to you. After reaching that point I asked myself the same questions and ended up here. Unfortunatly I had to help myself and solved it.

Your basic problem is that you are using a method signature for the click event (function(e, data)) that will overwrite the signature of the containing add method (function(e, data)). So while you've been trying to remove the data context you were actually altering the data of the click event. So just leave the variables (or either rename them) in the click event, because in your example you don't need them.

After doing that you end up trying to cleanly "destroy" uploads. I figured out, it's clean to first abort them and disable any later submit.

Here is a working code example that should fit your needs and has some self-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's running.
        data.abort();
        // Overwrite the plugin's default submit function.
        data.submit = function () { returnfalse; };
        // Optional: Remove the data context (thus from collection).//data.context.remove();
        })
    ;

},

Additional hint: Don't use double quotation marks for JavaScript, because you need to escape them within the HTML-markup.

How to load the JavaScript

This question is far more complex than you expect. It's a never-ending discussion of conformity/clean HTML-markup versus page loading. When choosing one direction you end up in another choice between onload-events and jQuery. You should open another question or try to find a related one. While doing that I agree with putting your scripts in a clean anonymous function, which is automatically loaded after the document being ready: $(function() { /*yourcontent*/ });.

Solution 2:

According to the Documentation for the plugin there should be a .destroy method, but the docs are pretty fuzzy about how to initialize it, or if its to destroy a file from the array, or just destroy the whole form. There should be a way, at-least in theory there should be.

As for the second part, yes. Your code should be in a jQuery initializer such as $(document).ready or the more popular $(function() {});