[Catalyst] RFC - Catalyst::Plugin::UploadProgress (changes to accommodate safari)

Wed Feb 20 18:39:18 GMT 2008

      I am looking for comments from people whom use this plugin.  I have
had some issues getting it to display the upload progress bar realtime with
safari.  After a lot of digging around it appears as though safari does not
allow you to update the DOM while a form containing a fileupload is posted.
Actual usage shows the progress bar for a flash (or not even) right before
the final page reload happens from the form action url.

      The solution I have found and seems to test across all browsers
(ie,ff,safari, opera) is to (yes I know i hate them too) use an invisible
iframe in the form and set the form's target to that iframe.  The jmpl js
needs to be changed to redirect to the action url to achieve the same
redraw of the screen that happens after the non-iframe-target-hacked
version.

My questions are:

Has anyone else seen these issues, or found any other way around them?
Should I just submit a patch for pod describing the issue and workaround
for safari OR change the pod, startEmbeddedProgressBar to accept a target
final target argument and jmpl to allow for the jump?

See below for a working  (safari,ff,ie,opera) example modified from the pod
(without the jmpl/js mods).

 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.
    <html>
      <head>
        [% c.upload_progress_javascript %]
      </head>
      ...

    # For better performance, copy these 3 files from the UploadProgress
    # distribution to your static directory and include them normally.
    <html>
      <head>
        <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>
      </head>
      ...

    # 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'
          method="post"
          enctype="multipart/form-data"
+          target="target_upload"
          onsubmit="return startEmbeddedProgressBar(this)">
+ <iframe id='target_upload' name='target_upload' src=''
style='width:1px;height:1px;border:0'></iframe>

      <input type="file" name="file" />
      <input type="submit" />
    </form>
    <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 );
    }

Thanks!
Wade Stuart
Fallon Worldwide
P: 612.758.2660
C: 612.877.0385