├── Gemfile
├── Gemfile.lock
├── README.md
├── config.ru
├── example_ajax_upload.rb
└── public
└── index.html
/Gemfile:
--------------------------------------------------------------------------------
1 | source 'https://rubygems.org'
2 |
3 | gem 'sinatra'
4 |
--------------------------------------------------------------------------------
/Gemfile.lock:
--------------------------------------------------------------------------------
1 | GEM
2 | remote: https://rubygems.org/
3 | specs:
4 | rack (1.5.2)
5 | rack-protection (1.5.3)
6 | rack
7 | sinatra (1.4.5)
8 | rack (~> 1.4)
9 | rack-protection (~> 1.4)
10 | tilt (~> 1.3, >= 1.3.4)
11 | tilt (1.4.1)
12 |
13 | PLATFORMS
14 | ruby
15 |
16 | DEPENDENCIES
17 | sinatra
18 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Example of Ajax-powered file uploads
2 |
3 | A simple application written in Ruby, using the Sinatra framework. Hopefully it should be easy to read even to those who don't know Ruby.
4 |
5 | To run it, do:
6 |
7 | rackup -I.
8 |
9 | And the application should be accessible at `http://localhost:9292`.
10 |
11 | # What to look at?
12 |
13 | The important bit is the client code, found at `/public/index.html`
14 |
15 | This code is thoroughly commented, and there's additional information at our original article covering [Ajax file uploads](http://blog.new-bamboo.co.uk/2010/7/30/html5-powered-ajax-file-uploads)
16 |
17 | # Not really HTML5
18 |
19 | Although initially I (Pablo Brasero) referred to this technique as HTML5 uploads, this is not actually correct. The interfaces used are described in two separate specifications, different from HTML5. These are *XMLHttpRequest level 2* and the *File API*.
20 |
21 | Also, remember that these specifications are, at the time of writing, working drafts. They could change in the future, before they become full-fledged W3C recommended standards.
22 |
--------------------------------------------------------------------------------
/config.ru:
--------------------------------------------------------------------------------
1 | require 'rubygems'
2 | require 'sinatra'
3 | require 'example_ajax_upload'
4 |
5 | run Sinatra::Application
6 |
--------------------------------------------------------------------------------
/example_ajax_upload.rb:
--------------------------------------------------------------------------------
1 | require 'sinatra'
2 | require 'pp'
3 |
4 | get '/' do
5 | send_file File.join(settings.public_folder, 'index.html')
6 | end
7 |
8 | post '/' do
9 | our_file = params.delete('our-file')
10 | "Received form fields:\n\n" + pretty_str(params) +
11 | "\nAnd uploaded file:\n\n" + file_info(our_file)
12 | end
13 |
14 | post '/upload' do
15 | file_info params['our-file']
16 | end
17 |
18 | def file_info(file)
19 | details = {
20 | :filename => file[:filename],
21 | :type => file[:type],
22 | :head => file[:head],
23 | :name => file[:name],
24 | :tempfile_path => file[:tempfile].path,
25 | :tempfile_size => file[:tempfile].size,
26 | }
27 | pretty_str details
28 | end
29 |
30 | def pretty_str(obj)
31 | ''.tap{|output| PP.pp(obj, output) }
32 | end
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Ajax upload form
6 |
7 |
8 |
9 |
13 | Your browser does not support Ajax uploads :-(
The form will be submitted as normal.
14 |
15 |
16 |
176 |
177 |
178 |
--------------------------------------------------------------------------------