FineUploader Fade Each Row

Question

I am trying to use fineUploader but I am running into an issue. The issue is really because I am not that well versed on jQuery, so my apologies if this is a dumb questions.

Below is my code. I want to fadeOut each row that is successfully loaded in fineUploader so that in the end of the upload all that will appear is the original upload button or failed uploads. It just looks really tacky if you upload 1000 files, there are 1000 rows of green boxes for each image that was uploaded. I like the way Uploadify works, whereas each row slowly fades out once it is uploaded that way at the end, there are no rows of uploaded images. Can anyone suggest a solution for me? Thanks!

This is the container which jQuery loads each success or failed row into...
<ul id="basicUploadFailureExample" class="unstyled"></ul>

$(document).ready(function() {
var errorHandler = function(event, id, fileName, reason) {
    qq.log("id: " + id + ", fileName: " + fileName + ", reason: " + reason);
};

var uploader3 = new qq.FineUploader({
    element: $('#basicUploadFailureExample')[0],
    callbacks: {
        onError: errorHandler,
        onComplete: function(id, fileName, responseJSON) {
            if (responseJSON.success == true) {
                            // I would think the fade out would go here but I am just not sure... 
            } 
        }
    },
    request: {
        endpoint: "../server/php/example.php",
        params: {"generateError": true}
    },
    failedUploadTextDisplay: {
        mode: 'custom',
        maxChars: 5
    }
}); 

});

Answer 1

This is fairly easy to do, actually, and you have the right idea, you are just missing a critical API function.

Your code should look like this (only one line needs to be added/changed):

var uploader3 = new qq.FineUploader({
    element: $('#basicUploadFailureExample')[0],
    callbacks: {
        onError: errorHandler,
        onComplete: function(id, fileName, responseJSON) {
            if (responseJSON.success == true) {
               $(this.getItemByFileId(id)).hide('slow');
            } 
        }
    },
    request: {
        endpoint: "../server/php/example.php",
        params: {"generateError": true}
    },
    failedUploadTextDisplay: {
        mode: 'custom',
        maxChars: 5
    }
}); 

The one line I added to your onComplete handler calls the getItemByFileId function, which returns the element that contains the file details displayed in the UI. Simply hide it, or perform some other animation on it the ultimately hides it.

BTW, I think this is a cool idea (fading out all but failed uploads).