Rails 3.1 + Paperclip + jQuery fileupload

Question

I've been looking for a way to set up Ruby on Rails 3.1 with Paperclip and jQuery fileupload. Looking at a tutorial at jQuery fileupload page I got the system set up but I can't find a way to make paperclip process the uploaded file.

Here's what I have (in short):

# model
has_attached_file :photo ...

# view
= form_for @user, :html => {:multipart => true} do |f|
  f.file_field :photo, :multiple => true
  f.submit

# controller
def create
  @user = User.new params[:user]
  if @user.save
    render :json => [...]
end

If I inspect submitted data I get all user properties in params[:user] and params[:user][:photo] which is ActionDispatch::Http::UploadedFile. When @user.save is called the image doesn't get processed or saved.

A clue, tutorial or a solution would be much appreciated!

Answer 1

After struggling with this problem for a while I discovered the problem appeared when :multipart => true is added to the f.file_field since the form field name changes from user[photo] to user[photo][].

Using separate page to attach photos

I want to have a separate page for uploading multiple files to a record (and another one for editing User's properties). This looks to me as a temporary solution but it works. Instead of f.form_field :photo, :multipart => true I used form_field_tag 'user[photo]', :multiple => true in the view.

My code looks like this:

## app/model/user.rb
has_attached_file :photo

def to_fileupload_json
  {
    "name" => photo_file_name,
    "size" => photo_file_size,
    ...
  }
end

## app/views/photos/new.html.haml
= form_for @user, :url => users_path, :html => { :multipart => true } do |f|
  #fileupload
    = file_field_tag 'user[photo]', :multiple => true
    = f.submit

= javascript_include_tag "jquery.fileupload.js"
# require all other JS files needed for the plugin (jQuery, jQuery UI, ...)
= stylesheet_link_tag "jquery.fileupload-ui.css"
= render :partial => "jquery_file_templates" # partial with jQuery templates for responses 

:javascript
  $(function () {
      uploader = $('#fileupload').fileupload()
  }


## app/controllers/users_controller.rb
def create
  @user = User.create params[:user]
end

If anyone else knows a better way (the right way) of doing this, please let us know!

Using fields_for

Depending on the structure of your app you might consider using fields_for.

In this case you'll have to:

• add accepts_nested_attributes_for :photos to your (User) model
• add a method photos_attribues=(attributes) to your (User) model and handle record creation there
• build record for photos 3.times { @user.photos.build } in User's new method

Example:

def photos_attribues=(attributes)
  attributes.each do |key, value|
    photo = Photo.create :photo => value, ...
  end
end

Disclaimer: The code above was simplified/rewritten to make it easier to understand. I might've made mistakes while erasing unneeded stuff. And again - I'm not really sure this is the right way of solving this problem. Suggestions and improvements are more than welcome!

Answer 2

If you explicitly set the name on the file_field:

f.file_field :photo, multiple: true, name: 'user[photo]'

Rails will generate user[photo] instead of user[photo][].