Tomas Doran
and 1 contributors


Catalyst::Plugin::UploadProgress - Realtime file upload information


    use Catalyst;
    MyApp->setup( qw/Static::Simple Cache::FastMmap UploadProgress/ );

    # On the HTML page with the upload form, include the progress
    # JavaScript and CSS.  These are available via a single method
    # if you are lazy.
        [% c.upload_progress_javascript %]

    # For better performance, copy these 3 files from the UploadProgress
    # distribution to your static directory and include them normally.
        <link href="/static/css/progress.css" rel="stylesheet" type="text/css" />
        <script src="/static/js/progress.js" type="text/javascript"></script>
        <script src="/static/js/progress.jmpl.js" type="text/javascript"></script>

    # Create the upload form with an onsubmit action that creates
    # the Ajax progress bar.  Note the empty div following the form
    # where the progress bar will be inserted.
    <form action='/upload'
          onsubmit="return startEmbeddedProgressBar(this)">
      <input type="file" name="file" />
      <input type="submit" />
    <div id='progress'></div>

    # No special code is required within your application, just handle
    # the upload as usual.
    sub upload : Local {
        my ( $self, $c ) = @_;

        my $upload = $c->request->uploads->{file};
        $upload->copy_to( '/some/path/' . $upload->filename );


This plugin is a simple, transparent method for displaying a progress bar during file uploads.


Please see the example/Upload directory in the distribution for a working example Catalyst application with upload progress. Since Upload Progress requires 2 concurrent connections (one for the upload and one for the Ajax, you will need to use either script/ (which requires Catalyst::Engine::HTTP::POE >= 0.02) or script/ -f. The -f enables forking for each new request.


The included demo application has been tested and is known to work on the following setups with Catalyst 5.7003:

C::E::HTTP ( with -f flag (OSX) C::E::HTTP::POE 0.06 (OSX) C::E::Apache2::MP20 1.07 with Apache 2.0.58, mod_perl 2.0.2 (OSX) C::E::FastCGI with Apache 2.0.55, mod_fastcgi 2.4.2 (Ubuntu)


You don't need to know about these methods, but they are documented here for developers.

upload_progress( $progress_id )

Returns the data structure associated with the given progress ID. Currently the data is a hashref with the total size of the upload and the amount of bytes received so far.

        size     => 110636659,
        received => 134983


Returns a JSON response containing the upload progress data.


Inlines the necessary JavaScript and CSS code into your page. For better performance, you should copy the files into your application as displayed above in the Synopsis.


prepare_body ( $c )

Detects if the user aborted the upload.

prepare_body_chunk ( $chunk )

Takes each chunk of incoming upload data and updates the upload progress record with new information.


Watches for a URI ending with '?progress_id=<id>' and returns the JSON output from /upload_progress_output.



Andy Grundman, <>

NEXT to Moose::Role conversion by Toby Corkindale, <>, blame him for any faults there..


The authors of Apache2::UploadProgress, for the progress.js and progress.css code:

    Christian Hansen <>
    Cees Hek <>


This program is free software, you can redistribute it and/or modify it under the same terms as Perl itself.