Question

105

Plupload - Function on Upload Complete?

rated 0 times [ 109] [ 4] / answers: 1 / hits: 18974 / 12 Years ago, wed, september 26, 2012, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

savanar

Add To Favorites

Follow

Total Points: 237

Total Questions: 105

Total Answers: 99

Location: Wales

Member since Mon, May 17, 2021

3 Years ago

savanar questions

1 Vercel Next.js build error while prerendering pages

Sun, May 30, 21, 00:00, 3 Years ago

1 Purge-css is removing all css stylings instead of just the unused ones

Fri, May 14, 21, 00:00, 3 Years ago

1 How to get file path from File object observer in v-file-input Vuetify?

Sun, May 10, 20, 00:00, 4 Years ago

1 attributeChangedCallback doesn't get called even after defining observedAttributes

Thu, Feb 20, 20, 00:00, 4 Years ago

1 Setting angular material date picker value programmatically

Tue, Dec 3, 19, 00:00, 5 Years ago

View All

answered 12 Years ago ninaemiliaj · Accepted Answer

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.