HTML5 multiple file upload (Rails edition)

This is just to gain a little understanding of file uploading in HTML5. To keep it bonehead, I’m going to use plain-vanilla HTML and javascript, and a tiny, tiny controller in Rails. The next post will tell how to use Paperclip to attach the uploaded files.

1. Make a new rails app:

rails new bonehead

2. Rename /public/index.html to /public/old_index.html

3. Stick the following version of index.html in its place:

4. Now, we’ll need a controller:

rails g controller Bounces incoming

5. then fiddle /config/routes.rb

from: get “bounces/incoming/”

to: post “bounces/incoming/”

6. Then edit your bounces_controller.rb so it looks like this:

Now, you have a “looks like it’s working” version of a file uploader to play with. It doesn’t save anything, which is perfect at this point. You can’t hurt anything because it doesn’t do anything. Have a good play with it. Here are some things to notice:

A. When HTML5 file inputs are set to “multiple,” they make a FileList object. Check it out in the console (Firefox with Firebug extension works fine.) There are lots of attributes in there, but these seem to be the most important

B. HTML5 doesn’t provide some of the data we like to get about files in the request, so we send it in custom headers. “X-File-Name” seems to be common practice for the file name, and ‘X-Query-Params’ seems to be common practice for other parameters in JSON-encoded form.

C. I added a couple of attributes to the JSON hash that might come in handy:

a ‘file_model’ attribute so I can say this gets attached to an ‘avatar’ model or an ‘uploads’ model or whatever.
a ‘file_model_id’ so I can say that this file gets attached to some particular instance of the model.

D. The bounces_controller just sends a response — It could be a lot more compliant, but this tells us what’s going on.

Next, I’ll start saving the files using Paperclip.

Tip of the beanie to: http://www.matlus.com/html5-file-upload-with-progress/ and http://blog.new-bamboo.co.uk/2010/7/30/html5-powered-ajax-file-uploads

Advertisements
This entry was posted in Information, Ruby on Rails and tagged , , , . Bookmark the permalink.

3 Responses to HTML5 multiple file upload (Rails edition)

  1. Manny says:

    Hi,thank you for the great tutorial. I have a form with input for upload an image and several text-inputs. I added the onclick event runit() to my submit button and I want to send this information from form send to my controller, but unfortunately – this way not works. I’m still getting the error "can’t convert nil into String" on the line "json_params = ActiveSupport::JSON.decode(req_json)"Could you help me, please, what could be wrong?

  2. Pingback: HTML5 Paperclip multiple file upload and attach | youcanlookitup

  3. Pingback: Rails 4 update: multiple file upload with HTML5 and Paperclip | You Can Look It Up

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s