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

I'm using Plupload () 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>

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>

• javascript
• plupload

• Thanks for the reply. I don't need to access the file names, I simply want to trigger another function once the uploads are complete (i.e update another div on the page) - the actual files being uploaded are irrelevant. – Lee Commented Sep 26, 2012 at 19:20
• After all the uploads are complete? – Cybrix Commented Sep 26, 2012 at 19:24
• Ideally, yes - but it wouldn't hurt to have it fire after each one individually. – Lee Commented Sep 26, 2012 at 19:26
• Oops I believe we are going nowhere now since I'm walking too far from the actual question. You say it's not updating the div once the file(s) are uploaded which means that the FileUploaded is never being triggered because your "response" from the backend isn't understood by Plupload. Am I assuming right? If so, we will continue from here. – Cybrix Commented Sep 26, 2012 at 19:31
• Yes, you are assuming right :-) However, my understanding is that 'my' backend doesnt need to send a response - the front-end (plupload) appears to know when it's finished processing (it updates the uploader div to include the number of files uploaded). – Lee Commented Sep 26, 2012 at 19:33

2 Answers 2

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.

It works better using UploadComplete instead of FileUploaded