1 (edited by matt_nz 2010-05-19 06:01:59)

Topic: Redirect after queue has completed

Thanks for this great tool.

I am wanting to do something like:

uploader.bind('QueueComplete', function() {
window.location= 'http://page_that_displays_the_uploaded_images';
});

I can't see any queue-complete event in the api. Is it possible to get some javascript to run once the queue ends?

The javascript has to be dynamic (the url will change), so it needs to be in the head javascript.

Thanks.

Re: Redirect after queue has completed

You have the FileUploaded event in that event you can compare the files.length with uploader.total.uploaded and see if they match if they do everything is done.

Something like:
if (uploader.total.uploaded == uploader.files.length)
  ..

Re: Redirect after queue has completed

Thanks, it works, if anyone else needs this the code, it was:

add in:
preinit: attachCallbacks,

below all the bits like
unique_names : false,

then after the whole initilisation bit add in:

function attachCallbacks(Uploader) {

Uploader.bind('FileUploaded', function(Up, File, Response) {

  if( (Uploader.total.uploaded + 1) == Uploader.files.length)
  {
    window.location = 'http://www';
  }
});

4 (edited by nivlem 2010-05-30 02:41:25)

Re: Redirect after queue has completed

Hi i cant get your suggestion to work, would you be able to see where i am going wrong? i am using the example code from plupload while i get my head around how it all works. so far it works as it should, i just need to impliment a redirect once files finish uploading.

Here is where i added your code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="css/plupload.queue.css" type="text/css" media="screen" />
<title>Plupload - Queue widget example</title>
<style type="text/css">
body {background: #9A7C5F;}
</style><!-- Load Queue widget CSS and jQuery -->
<style type="text/css">@import url(css/plupload.queue.css);</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("jquery", "1.3");
</script>

<!-- Thirdparty intialization scripts, needed for the Google Gears and BrowserPlus runtimes -->
<script type="text/javascript" src="../js/gears_init.js"></script>
<script type="text/javascript" src="http://bp.yahooapis.com/2.4.21/browserplus-min.js"></script>

<!-- Load plupload and all it's runtimes and finally the jQuery queue widget -->
<script type="text/javascript" src="../js/plupload.full.min.js"></script>
<script type="text/javascript" src="../js/jquery.plupload.queue.min.js"></script>

<script type="text/javascript">
// Convert divs to queue widgets when the DOM is ready
$(function() {
    $("#uploader").pluploadQueue({
        // General settings
        runtimes : 'gears,flash,silverlight,browserplus,html5',
        url : 'upload.php',
        max_file_size : '10mb',
        chunk_size : '1mb',
        unique_names : false,
        // adding this for redirecting to page once upload complete
        preinit: attachCallbacks,



        // Resize images on clientside if we can
        resize : {width : 640, height : 480, quality : 75},

        // Specify what files to browse for
        filters : [
            {title : "Image files", extensions : "jpg,gif,png"},
            {title : "Zip files", extensions : "zip"}
        ],

        // Flash settings
        flash_swf_url : '../js/plupload.flash.swf',

        // Silverlight settings
        silverlight_xap_url : '../js/plupload.silverlight.xap'
    });



    // Client side form validation
    $('form').submit(function(e) {
        var uploader = $('#uploader').pluploadQueue();

        // Validate number of uploaded files
        if (uploader.total.uploaded == 0) {
            // Files in queue upload them first
            if (uploader.files.length > 0) {
                // When all files are uploaded submit form
                uploader.bind('UploadProgress', function() {
                    if (uploader.total.uploaded == uploader.files.length)
                        $('form').submit();
                });

                uploader.start();
            } else
                alert('You must at least upload one file.');

            e.preventDefault();
        }
    });

});
                            // added below to redirect after uploaded

    function attachCallbacks(Uploader) {

Uploader.bind('FileUploaded', function(Up, File, Response) {

  if( (Uploader.total.uploaded + 1) == Uploader.files.length)
  {
    window.location = '[url]http://www.anotherpage.co.uk[/url]';
  }
});
// added above to redirect after uploaded
</script>
</head>
<body>

<form ..>
    <div id="uploader">
        <p>You browser doesn't have Flash, Silverlight, Gears, BrowserPlus or HTML5 support.</p>
    </div>
</form>
</body>
</html>

using the above code breaks the uploader.

an help is much appreciated and this is what i have been after for so long, its awsome!!!

Re: Redirect after queue has completed

Are you using the web developer tool for firefox? (https://addons.mozilla.org/en-US/firefox/addon/60/), if so can you check if there is a javascript error, and post what the error is:

http://www.ignitejoomlaextensions.com/i … -error.gif

Re: Redirect after queue has completed

sorry guys there is a } missing in the above script.

there was no closing curly brace for this function:

function attachCallbacks(Uploader) {


Thanks for the help

7 (edited by shoulders 2011-02-06 17:14:29)

Re: Redirect after queue has completed

This is excellent and should be added to the examples.
once i read the instructions properely and added

preinit: attachCallbacks

everything worked fine

cheers

8

Re: Redirect after queue has completed

Hello, thanks for all your help so far. However; I can't seem to get the uploader to display whith the new
preinit: attachCallbacks,
and  the Function
* fixed the " } " error

I have had a very difficult time trying to preform this simple redirect, which in my case is a page reload without initializing the uploader. I want my users to be able to see the files they just uploaded in the proper context. ( a simple file list )

my code is on pastbin since i cant use the tags here
http://pastebin.com/zdNvp3Wc

Re: Redirect after queue has completed

There are several issues with your code:

1. You better not attach callback to preinit, there are specific consequences that follow and looking at your code I don't think you need them. So better attach to init instead.

2. Instead of FileUploaded use UploadComplete and won't have to rely on suspicious arithmetics, like: Uploader.total.uploaded + 1 == Uploader.files.length (?)

3. This is wrong: 

window.location = '[url]http://www.anotherpage.co.uk[/url]';

strip off url tags.

If you want to see your issue fixed, do not report it here, do it on - GitHub.

10 (edited by dragon_sa 2011-10-05 17:19:50)

Re: Redirect after queue has completed

I have been trying to get this mod to work, but every time I incorporate it I get the message saying that flash etc is not supported by my browser, and the flash upload widget does not show, here is how I tried to implement it

<script type="text/javascript">
// Convert divs to queue widgets when the DOM is ready
$(function() {
    $("#uploader").pluploadQueue({
        // General settings
        runtimes : 'flash,html5',
        url : 'upload.php',
        max_file_size : '10mb',
        chunk_size : '1mb',
        unique_names : false,
        
        // redirect mod
        preinit: attachCallbacks,

        
        // Resize images on clientside if we can
    //    resize : {width : 320, height : 240, quality : 90},

        // Specify what files to browse for
        filters : [
            {title : "Allowed files", extensions : "jpg,gif,png,txt,doc,docx,pdf,zip"}
        ],

        // Flash settings
        flash_swf_url : 'js/plupload.flash.swf'

    });

    // Client side form validation
    $('form').submit(function(e) {
        var uploader = $('#uploader').pluploadQueue();

        // Files in queue upload them first
        if (uploader.files.length > 0) {
            // When all files are uploaded submit form
            uploader.bind('StateChanged', function() {
                if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
                    $('form')[0].submit();
                }
            });
                
            uploader.start();
        } else {
            alert('You must queue at least one file.');
        }

        return false;
    });
});
// added redirect function after uploaded
function attachCallbacks(Uploader) {
Uploader.bind('FileUploaded', function(Up, File, Response) {
    if( (Uploader.total.uploaded + 1) == Uploader.files.length)
         {
        window.location = 'http://www.somepage.com/page.php';
          }
    }
});
</script>

can anyone see where I have gone wrong, if I remove the function attachCallbacks the upload script works again, but of coarse I dont get the redirect when done.

Re: Redirect after queue has completed

@dragon_sa  Looking at your code, you are setting the var for the uploader as:

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

But then in your callback, you're using:
Uploader.bind
Uploader.total.uploaded

Etc.

uploader != Uploader.  make sure your vars are the same, and it should work.  That's one of the issues I found with this code if you just copy and paste it.

Re: Redirect after queue has completed

@zoomphoto thank you for your help, I made the changes but it has not fixed the issue, at least maybe 1 step closer to sorting it out here is the code I have now

<script type="text/javascript">
// Convert divs to queue widgets when the DOM is ready
$(function() {
    $("#uploader").pluploadQueue({
        // General settings
        runtimes : 'flash,html5',
        url : 'upload.php',
        max_file_size : '10mb',
        chunk_size : '1mb',
        unique_names : false,
        // redirect mod
        preinit : attachCallbacks,
        // Resize images on clientside if we can
    //    resize : {width : 320, height : 240, quality : 90},

        // Specify what files to browse for
        filters : [
            {title : "Allowed files", extensions : "jpg,gif,png,txt,doc,docx,pdf,zip"}
        ],

        // Flash settings
        flash_swf_url : 'js/plupload.flash.swf'

    });

    // Client side form validation
    $('form').submit(function(e) {
        var uploader = $('#uploader').pluploadQueue();

        // Files in queue upload them first
        if (uploader.files.length > 0) {
            // When all files are uploaded submit form
            uploader.bind('StateChanged', function() {
                if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
                    $('form')[0].submit();
                }
            });
               
            uploader.start();
        } else {
            alert('You must queue at least one file.');
        }

        return false;
    });
});
// added redirect function after uploaded
function attachCallbacks(uploader) {
uploader.bind('FileUploaded', function(Up, File, Response) {
    if( (uploader.total.uploaded + 1) == uploader.files.length)
         {
        window.location = 'http://somewebpage';
          }
    }
});

</script>

Re: Redirect after queue has completed

Is anyone able to see the issue with code preventing it from working, Im stuck

<script type="text/javascript">
// Convert divs to queue widgets when the DOM is ready
$(function() {
    $("#uploader").pluploadQueue({
        // General settings
        runtimes : 'flash,html5',
        url : 'upload.php',
        max_file_size : '10mb',
        chunk_size : '1mb',
        unique_names : false,
        // redirect mod
        preinit : attachCallbacks,
        // Resize images on clientside if we can
    //    resize : {width : 320, height : 240, quality : 90},

        // Specify what files to browse for
        filters : [
            {title : "Allowed files", extensions : "jpg,gif,png,txt,doc,docx,pdf,zip"}
        ],

        // Flash settings
        flash_swf_url : 'js/plupload.flash.swf'

    });

    // Client side form validation
    $('form').submit(function(e) {
        var uploader = $('#uploader').pluploadQueue();

        // Files in queue upload them first
        if (uploader.files.length > 0) {
            // When all files are uploaded submit form
            uploader.bind('StateChanged', function() {
                if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
                    $('form')[0].submit();
                }
            });
                
            uploader.start();
        } else {
            alert('You must queue at least one file.');
        }

        return false;
    });
});
// added redirect function after uploaded
function attachCallbacks(uploader) {
uploader.bind('FileUploaded', function(Up, File, Response) {
    if( (uploader.total.uploaded + 1) == uploader.files.length)
         {
        window.location = 'http://www.website.com/view.php';
          }
    }
});

</script>

I just cant get it to work unless I remove the page redirect parts sad
Any help appreciated

Re: Redirect after queue has completed

your code contain extras parenthesis and semicolon at the end:

function attachCallbacks(uploader) {
uploader.bind('FileUploaded', function(Up, File, Response) {
    if( (uploader.total.uploaded + 1) == uploader.files.length)
         {
        window.location = 'http://www.website.com/view.php';
          }
    }
});

to find this kind of error quick, you should use FireBug (firefox extension) or validate your code at http://jsutility.pjoneil.net/

Re: Redirect after queue has completed

Thanks for your help, much apreciated, I removed the brace and the semi colon, but then firebug, started saying there was missing brackets in the plupload.full.js script, which is the original complete script from this site, and alas the function still does not work, with that addition

Re: Redirect after queue has completed

here the plupload.full.js is ok, try to download it again. if this doesn't solve, post your code, with the error that firebug is showing.

Re: Redirect after queue has completed

Thanks again, I download and used the latest plupload.full.js from here as suggested

here is what I get from firebug

plupload is not defined
()plupload.full.js (line 2)
[Break On This Error] Failed to load source for: http://play...t.com.au/westcoast/js/plupload.full.js

and line 2 is highlighted to here when clicking on the error

(function(){var f=0,l=[],n={},j={},a={"<":"lt",">":"gt","&":"amp",'"':"quot","'":"#39"},m=/[<>&\"\']/g,b,c=window.setTimeout,d={},e;function h(){

and here is the code I am trying to use

<!-- Load the queue CSS -->
<style type="text/css">@import url(js/jquery.plupload.queue/css/jquery.plupload.queue.css);</style>
<!-- Load plupload and all it's runtimes and finally the jQuery queue widget -->
<script type="text/javascript" src="js/plupload.full.js"></script>
<script type="text/javascript" src="js/jquery.plupload.queue/jquery.plupload.queue.js"></script>

<script type="text/javascript">
// Convert divs to queue widgets when the DOM is ready
$(function() {
    $("#uploader").pluploadQueue({
        // General settings
        runtimes : 'flash,html5',
        url : 'upload.php',
        max_file_size : '10mb',
        chunk_size : '1mb',
        unique_names : false,
        // redirect mod
        preinit : attachCallbacks,
        // Resize images on clientside if we can
    //    resize : {width : 320, height : 240, quality : 90},

        // Specify what files to browse for
        filters : [
            {title : "Allowed files", extensions : "jpg,gif,png,txt,doc,docx,pdf,zip"}
        ],

        // Flash settings
        flash_swf_url : 'js/plupload.flash.swf'

    });

    // Client side form validation
    $('form').submit(function(e) {
        var Uploader = $('#uploader').pluploadQueue();

        // Files in queue upload them first
        if (Uploader.files.length > 0) {
            // When all files are uploaded submit form
            Uploader.bind('StateChanged', function() {
                if (Uploader.files.length === (Uploader.total.uploaded + Uploader.total.failed)) {
                    $('form')[0].submit();
                }
            });
                
            Uploader.start();
        } else {
            alert('You must queue at least one file.');
        }

        return false;
    });
});
// added redirect function after uploaded
function attachCallbacks(Uploader) {
uploader.bind('FileUploaded', function(Up, File, Response) {
    if( (Uploader.total.uploaded + 1) == Uploader.files.length)
         {
        window.location = 'http://playground.saint.com.au/westcoast/view.php';
          }
    }
}

</script>

Re: Redirect after queue has completed

don't know what's happening, but to redirect the page after the uploads, you should try the StateChanged event like in

http://www.plupload.com/example_queuewidget.php

Re: Redirect after queue has completed

FINALLY!!! I got it working there was a missing ) on the line above where you asked me to remove the extra );
Here is the finished working code for anyone who wants it, I only use flash and html5 settings so you may want to change that for your own needs but here is the working script.

<script type="text/javascript">
// Convert divs to queue widgets when the DOM is ready
$(function() {
    $("#uploader").pluploadQueue({
        // General settings
        runtimes : 'flash,html5',
        url : 'upload.php',
        max_file_size : '10mb',
        chunk_size : '1mb',
        unique_names : false,
        // redirect mod
        preinit : attachCallbacks,
        // Resize images on clientside if we can
    //    resize : {width : 320, height : 240, quality : 90},

        // Specify what files to browse for
        filters : [
            {title : "Allowed files", extensions : "jpg,gif,png,txt,doc,docx,pdf,zip"}
        ],

        // Flash settings
        flash_swf_url : 'js/plupload.flash.swf'

    });

    // Client side form validation
    $('form').submit(function(e) {
        var uploader = $('#uploader').pluploadQueue();

        // Files in queue upload them first
        if (uploader.files.length > 0) {
            // When all files are uploaded submit form
            uploader.bind('StateChanged', function() {
                if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
                    $('form')[0].submit();
                }
            });
                
            uploader.start();
        } else {
            alert('You must queue at least one file.');
        }

        return false;
    });
});
// added redirect function after uploaded
function attachCallbacks(uploader) {
uploader.bind('FileUploaded', function(Up, File, Response) {
    if( (uploader.total.uploaded + 1) == uploader.files.length)
         {
        window.location = 'http://playground.saint.com.au/westcoast/view.php';
          }
    })
}

</script>

20 (edited by dragon_sa 2012-02-18 18:08:11)

Re: Redirect after queue has completed

davit wrote:

2. Instead of FileUploaded use UploadComplete and won't have to rely on suspicious arithmetics, like: Uploader.total.uploaded + 1 == Uploader.files.length (?)

How do I actually use UploadComplete instead of FileUploaded in the following function?

// added redirect function after uploaded
function attachCallbacks(uploader) {
uploader.bind('FileUploaded', function(Up, File, Response) {
    if( (uploader.total.uploaded + 1) == uploader.files.length)
         {
        window.location = 'http://playground.saint.com.au/westcoast/view.php';
          }
    })
}

I have noticed that 1 file in a group file upload will sometimes only partially upload before the script jumps to the next page, I guess thats because of the suspicious arithmatic, as I never noticed this occurring before I added the function to redirect on completeion of uploaded files.

21 (edited by LeandroJF 2012-02-23 19:00:09)

Re: Redirect after queue has completed

UploadComplete:
http://www.plupload.com/plupload/docs/a … adComplete