Skip to content
This repository has been archived by the owner on Sep 13, 2022. It is now read-only.

Commit

Permalink
updated README
Browse files Browse the repository at this point in the history
  • Loading branch information
Tobias Bielohlawek committed Feb 23, 2010
1 parent bc1c67f commit 5849c7b
Showing 1 changed file with 41 additions and 37 deletions.
78 changes: 41 additions & 37 deletions README.markdown
Original file line number Diff line number Diff line change
Expand Up @@ -24,32 +24,42 @@ The basic HTML design should look like:


## Solution

I came up with a small&simple app called *The Traffic Machine* - a demonstration of background File Upload with Progress Bar.
I came up with a small & simple rails app called *_The Traffic Machine_ - a demonstration of background File Upload with Progress Bar*.

According to the specs, two major issues had to be solved:
1. upload the file in background, while user enters additional title/comment/text to the file
2. get the upload progress and show it to the user

Luckly, I didn't had to reinvent the wheel, as there are already solutions for both problems out there.
No Flash (yuck!!)
Usually, Flash solutions addresses those problems, but bring other disadvantages as well (wrong version/not installed/disabled). So I was looking for a solution without Flash. The latest specs of HTML5 give some further possibilities as well, but is not supported by majority of web browsers yet. *See sources at the bottom for further info*

Luckily, I didn't had to reinvent the wheel, as there are already solutions for both problems out there. For the
background upload, [Ajaxupload](http://valums.com/ajax-upload/) looked just fine for me. It's a jQuery implementation
of uploading a file to a hidden iFrame which happens in background and doesn't block the user from adding additional infromation.

To track the upload progress, I found the [Apache-upload-progress Module](http://github.com/mpokrywka/apache-upload-progress-module),
which adds an access point to your Apache, so you can easily get the total and received file size in JSON format.



### Basic Infrastrukture
* [Rails 2.3.5](http://rubyonrails.org/)
* [jQuery](http://railscasts.com/episodes/136-jquery) + [jRails](http://github.com/aaronchi/jrails)
* [Paperclip Plugin](http://github.com/thoughtbot/paperclip)
* [DefaultValue Plugin](http://blog.phusion.nl/2008/10/03/47/)
* [Blueprint CSS](http://blueprintcss.org/)
* [github.com/rngtng](http://github.com/rngtng/FileUploadProgress)
* sqlLite DB


### The Magic
* Background File upload: [Ajaxupload](http://valums.com/ajax-upload/)
* Upload Progress count: [Apache-upload-progress-module module](http://github.com/mpokrywka/apache-upload-progress-module)
* Upload Progress count: [Apache-upload-progress-module](http://github.com/mpokrywka/apache-upload-progress-module)


### Deployment
* Apache + passenger
* Apache 2 + [Passenger Module](http://www.modrails.com/)
* capistrano
* sqlLite DB
* git @ [github.com/rngtng](http://github.com/rngtng/FileUploadProgress)


## Future Improvements
* HTML 5 features
Expand All @@ -58,9 +68,7 @@ No Flash (yuck!!)

## A quick step by step Howto:

get apachemodule: http://github.com/mpokrywka/apache-upload-progress-module
compile:

get apachemodule, compile with:
`sudo apxs -c -i -a -Wc,-arch -Wc,ppc7400 -Wl,-arch -Wl,ppc7400 -Wc,-arch -Wc,x86_64 -Wl,-arch -Wl,x86_64 -Wc,-arch -Wc,i386 -Wl,-arch -Wl,i386 mod_upload_progress.c`

update apache conf and create vhost
Expand All @@ -69,43 +77,39 @@ create rails app
add plugins

* paperclip:
`config.gem 'paperclip', :source => 'http://gemcutter.org'`
* default value:
`script/plugin install git://github.com/FooBarWidget/default_value_for.git`
* jQuery
* jRails
* jQuery + jRails:
`script/plugin install git://github.com/aaronchi/jrails.git`

add blueprint css files

add basic html layout

add asset controller
add asset model, add [uuid](http://ariejan.net/2008/08/12/ruby-on-rails-uuid-as-your-activerecord-primary-key/)

add tests
add [ajaxupload](http://valums.com/ajax-upload/) for background upload
add ajax call to check upload progress

add jQuery Ajax call to check upload progress
finish it up and make it nice

deploy [with capistrano and git+passenger](http://www.zorched.net/2008/06/17/capistrano-deploy-with-git-and-passenger/)


## Further reading and other resources:
* http://railsillustrated.com/screencast-file-uploads-progress-in-rails-passenger.html
* http://drogomir.com/blog/2008/6/18/upload-progress-bar-with-mod_passenger-and-apache
* http://drogomir.com/blog/2008/6/30/upload-progress-script-with-safari-support
* http://www.therailsway.com/2009/4/23/uploading-files
* http://github.com/drogus/jquery-upload-progress
* http://adamelliot.com/posts/using-paperclip-with-datamapper-sinatra--2
* http://casperfabricius.com/site/2009/03/26/uploading-multiple-files-with-progress-indicator-using-jquery-flash-and-rails/
* http://sourceforge.net/projects/uber-uploader/
* http://www.sibsoft.net/xupload.html
* http://encodable.com/filechucker/
* PHP5: http://talks.php.net/show/afup06/22
* with Flash: http://github.com/digitarald/digitarald-fancyupload
* without Flash: http://code.google.com/p/noswfupload/
* Mutiple: http://webreflection.blogspot.com/2009/03/safari-4-multiple-upload-with-progress.html
* HTML5: http://rakaz.nl/2009/08/uploading-multiple-files-using-html5.html
* Sinatra: http://serverfault.com/questions/111721/how-can-i-do-a-large-file-upload-using-sinatra-haml-nginx-and-passenger
* nice lists: http://print.wordpress.com/2006/02/22/css-beautifully-numbered-lists/
* nice Fileupload style: http://www.quirksmode.org/dom/inputfile.html

* [](http://railsillustrated.com/screencast-file-uploads-progress-in-rails-passenger.html)
* [](http://drogomir.com/blog/2008/6/18/upload-progress-bar-with-mod_passenger-and-apache)
* [](http://drogomir.com/blog/2008/6/30/upload-progress-script-with-safari-support)
* [](http://www.therailsway.com/2009/4/23/uploading-files)
* [](http://github.com/drogus/jquery-upload-progress)
* [](http://adamelliot.com/posts/using-paperclip-with-datamapper-sinatra--2)
* [](http://casperfabricius.com/site/2009/03/26/uploading-multiple-files-with-progress-indicator-using-jquery-flash-and-rails)
* [](http://sourceforge.net/projects/uber-uploader)
* [](http://www.sibsoft.net/xupload.html)
* [](http://encodable.com/filechucker)
* [](http://talks.php.net/show/afup06/22) - PHP5
* [](http://github.com/digitarald/digitarald-fancyupload) - with Flash
* [](http://code.google.com/p/noswfupload) - without Flash
* [](http://webreflection.blogspot.com/2009/03/safari-4-multiple-upload-with-progress.html) - Mutiple Files
* [](http://rakaz.nl/2009/08/uploading-multiple-files-using-html5.html) - HTML5
* [](http://serverfault.com/questions/111721/how-can-i-do-a-large-file-upload-using-sinatra-haml-nginx-and-passenger) - Sinatra
* [](http://www.quirksmode.org/dom/inputfile.html) - nice Fileupload style

0 comments on commit 5849c7b

Please sign in to comment.