6

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>
Lee
  • 989
  • 2
  • 14
  • 30
  • 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 Sep 26 '12 at 19:20
  • After all the uploads are complete? – Cybrix Sep 26 '12 at 19:24
  • Ideally, yes - but it wouldn't hurt to have it fire after each one individually. – Lee Sep 26 '12 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 Sep 26 '12 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 Sep 26 '12 at 19:33
  • Try replacing your second part of the script by this one: `var uploader = $('#uploader').pluploadQueue(); uploader.bind('FileUploaded', function() { $(".outputimages").html('The output goes here'); });` The event needs to be used on the pluploadQueue reference and not a $(obj) that a pluploadQueue have been bound to. – Cybrix Sep 26 '12 at 19:44
  • No joy :-( Still no errors, but no update to the div either – Lee Sep 26 '12 at 19:47
  • It is working on my side right now. With the backend provided by them though. Maybe it's some indenting problem. I will uptload the full code as an answer even if it's not fully working. – Cybrix Sep 26 '12 at 19:49
  • Thanks! Maybe I need to look at their backend to see if their sending anything back that would trigger it – Lee Sep 26 '12 at 19:52
  • Well, you were right as my code is working even if I do not return any message from the backend. The JSON string `{"jsonrpc" : "2.0", "result" : null, "id" : "id"}` seems to be optional finally. Except when an error occurs. – Cybrix Sep 26 '12 at 19:53

2 Answers2

8

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.

Cybrix
  • 3,248
  • 5
  • 42
  • 61
  • That works! Thank you! I pasted in your sample exactly, then just changed the upload path and it works perfectly. Not quite sure where I was going wrong with it – Lee Sep 26 '12 at 19:59
  • I have tried to use the code above but I am getting an error "pluploadQueue is undefined". Any ideas? – Andreas Aug 05 '13 at 14:15
  • Yes, well, it's probably as simple as you don't have the file jquery.plupload.queue.js – Cybrix Aug 07 '13 at 03:38
7

It works better using UploadComplete instead of FileUploaded

kinsay
  • 71
  • 1
  • 1
  • You seem to understand how this system works, would you mind taking a look at this for me? http://stackoverflow.com/questions/16555550/how-do-i-return-data-via-ajax-using-plupload-on-upload-complete, Thank you! – Tony M May 15 '13 at 02:16