ryah ([info]four) wrote,
@ 2007-03-29 03:18:00
Previous Entry  Add to memories!  Tell a Friend!  Next Entry
Entry tags:projects, upload progress bar

Upload Progress Bars by way of Streaming Javascript
I implemented the XUpload technique of web upload progress bars by streaming javascript (instead of using polling AJAX calls) in Rails. I did this by extending the existing mongrel upload progress plug-in with a new one.

mongrel_streaming_upload_progress-0.1.gem

You'll find an example directory in there with a small Rails application. Start the example with this command

mongrel_rails start -p 3000 -S config/mongrel_upload_progress.conf
and navigate to http://localhost/files/new in Firefox.

The technique is to use onsubmit to load an iFrame which gets a stream of <script> elements telling the page how to update the progress bar.

Questions
  1. Why is this better?
    Because the traditional method is to have the client browser send a question "how much has been uploaded?" every 3 seconds to the web-server only to get the response "12% has been uploaded." Instead the XUpload technique just streams, in one response, "you've uploaded 5%... you've uploaded 8%... you've uploaded 9%." This is less stress on the server and client.
  2. Why not use an AJAX request and eval the response instead of this iFrame hack?
    Because (prototype) AJAX requests will not eval the response one statement at a time. (Does anyone have a library that can do that?)
  3. Does it work on Safari?
    Not yet, but it should; I can't figure out why. XUpload does.
  4. Why the other iFrame that the form is targeted to?
    Because if I don't have that, the second (important) iFrame does not get updated with the onsubmit. (I guess this is because the browser knows it's going to a new page, so won't load new frames.)

(Post a new comment)


[info]evan
2007-03-29 06:30 am UTC (link)
IIRC (and as I said on that post) the reason Safari doesn't work is that the streaming iframe's code is only ran when the request finishes.

(Reply to this) (Thread)

[info]four
2007-03-29 08:07 am UTC (link)
but xupload is "compatible with well known browsers (IE, Opera, Mozilla, Safari)", so it is possible.

(Reply to this) (Parent)(Thread)

[info]natan
2007-04-02 03:02 am UTC (link)
You should try it on a recent WebKit nightly build (they've changed a lot of stuff that's not in the current shipping Safari+WebKit). If that still doesn't work, then you should file a bug, or if you'd rather I can file one for you…

(Reply to this) (Parent)
small Rails Application
(Anonymous)
2007-05-06 05:37 pm UTC (link)
Is it included with the gem? After installing the gem I looked through my gems dir and didn't find any.

(Reply to this) (Thread)
Re: small Rails Application
[info]orbanbotond
2007-06-30 04:34 pm UTC (link)
Could somebody sent me a small working rails-app to try the streaming uploader? unfortunately the gem is a mongrel plugin, and doesn't contain any rails app.

(Reply to this) (Parent)(Thread)
Re: small Rails Application
[info]orbanbotond
2007-07-02 01:28 pm UTC (link)
Finally I managed to assemble the upload progress bar using streaming.

There are a few things to mention in order to put the whole thing working:
-The mongrel needs both gems in order to provide the streaming functionality.(mongrel_upload_progress and this one.) Because this gem uses the 'mongrel_upload_progress' for geting the size of uploaded file chunk. Actually uses the Mongrel::Uploads.check for retrieving this information.

Next, mongrel needs to be started using this config file:
uri "/",
:handler => plugin("/handlers/streaminguploadprogress", :path_info => "/store/progress", :javascript_update=>"window.parent.UploadProgress.update(%d, %d);"),
:in_front => true

uri "/",
:handler => plugin("/handlers/upload", :path_info => '/store/upload', :frequency => 0.01),
:in_front => true

After this the browser can get the upload progress streamed from "/store/progress".

This is for 'Ry'
I would suggest to rename the package to 'mongrel_upload_streaming_monitor'. In this way using 'gem list mongrel' it is much easier to track the mongrel related installed gems. (In the Rakefile 'name="mongrel_upload_streaming_monitor"')
And I would add also another dependency in the rakefile:
spec.add_dependency('mongrel_upload_progress', '>= 0.2.1')

I wish the best for everyone.
:)

(Reply to this) (Parent)(Thread)
Re: small Rails Application
[info]orbanbotond
2007-07-02 01:37 pm UTC (link)
Sorry from 'Ry' for the last tips.
Everything is ok in the original gem... ;) (I just stir something on my home machine...)

(Reply to this) (Parent)
Safari support
(Anonymous)
2007-11-01 05:37 am UTC (link)
Did this end up working in Safari?

I'm interested - how did you work around the problem?

(Reply to this) (Thread)
Re: Safari support
[info]four
2007-11-01 03:44 pm UTC (link)
it works on the new version of safari but not the older one - i couldn't get it working

(Reply to this) (Parent)

Create an Account
Forgot your login?
Login w/ OpenID
English • Español • Deutsch • Русский…