Plupload - Function on Upload Complete?

Question

I've been browsing through some 'similar' questions, but none either work or solve the particular issue I'm having.

I'm using Plupload (http://www.plupload.com) to upload images to Amazon S3. This is working great, however once the uploads are complete, I want to update another div on the page to show thumbnails of the uploaded files. My intention is to use jQuery.load to do this (as I'll need to run a DB query before I can output them). However, for now I'm trying to get the basics working and simply updating the div with text.

My current code (below) doesn't return any errors, but it's not updating the div once the file(s) are uploaded. Looking at the various answers/suggestions, there appears to be a variety of ways of achieving what I'm looking for - but I haven't been able to get any working.

Here's my code right now...

<script>
$(document).ready(function(upload) {
$("#uploader").pluploadQueue({
    runtimes : 'html5,html4',
    url : '/gallery/upload.cfm',
    max_file_size : '5000kb',
    multiple_queues : true,
    unique_names : true,
    filters : [
        {title : "Image files", extensions : "jpg,gif,png,jpeg"}
    ]
});
$("#uploader").bind('FileUploaded', function() {
$(".outputimages").html('The output goes here');
});
});
</script>

<div id="uploader">You browser doesn't have HTML 4 support.</div> 

<div class="outputimages"></div>

Answer 1

This is my code which is working on my side:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="plupload/jquery.plupload.queue.js"></script>
<script src="plupload/plupload.full.js"></script>
<script>
    $(function() {
        $("#uploader").pluploadQueue({
            runtimes : 'html5,html4',
            max_file_size : '10mb',
            url : 'upload.php',
            max_file_size : '5000kb',
            multiple_queues : true,
            unique_names : true,
            filters : [
                {title : "Image files", extensions : "jpg,gif,png,jpeg"}
            ]
        });

        var uploader = $('#uploader').pluploadQueue();

        uploader.bind('FileUploaded', function() {
            if (uploader.files.length == (uploader.total.uploaded + uploader.total.failed)) {
                $(".outputimages").html('The output goes here');
            }
        });
    });
</script>

<div id="uploader">You browser doesn't have HTML 4 support.</div> 

<div class="outputimages"></div>

This example, trigger the FileUploaded function after every files in the queue have been uploaded.

Answer 2

It works better using UploadComplete instead of FileUploaded