Multiple file upload with Rails 3.2, paperclip, html5 and no javascript

May 25, 2012No Comments

Today, I was looking for a simple multiple file upload solution for Ruby on Rails 3.2 with paperclip 3.0.4 and found several jQuery and Flash solutions, like Uploadify or jQuery-File-Upload, buy they seemed to be too heavy and complicated for my case. I didn’t need asynchronous upload and other features they provide, I only needed really simple (ideally pure html) solution to save several images for my Item model with regular form submit, but with possibility to select all images at once (in one input field).

Luckily, there is html5 attribute multiple for input type='file', which is already supported by modern browsers (Opera, Firefox, Chrome, Safari), and that’s pretty ok for me. In the following code snippet, I’ll show, how I used this attribute and how I marked up my rails form make it work with paperclip.

Note: As soon as IE doesn’t support multiple attribute, the example below will allow to upload only one file for IE users.

So basically I have Item model, which has many AttachedAsset models. AttachedAsset model is used to store image with paperclip. All code in models and controller is very simple and found in paperclip’s HOWTOs. The only non-obvious part is file_field_tag in the new.html.haml template – it has tricky name (to be handled as array of asset inside attached_assets_attributes) and multiple attributes is set to true.

rails paperclip

Ivan Tkalin

I'm Ivan Tkalin, a professional software developer, located in Berlin, Germany.

Currently I'm interested in everything related to Ruby, JavaScript, PostgreSQL, HTML/CSS, Linux, Git and Vim.

If you want to contact me, please send me an email

Feel free to follow me on twitter and github