Using Rails with Paperclip and SWFUpload

Question

I have a basic rails application test with a user model that has a photo field handled with paperclip. I created the views to be able to create/edit an user and the photo uploading is working nicely.

<h1>Editing user</h1>

<% form_for :user, @user, :url => user_path(@user), :html => { :method => "put", :multipart => true } do |f| %>
  <%= f.error_messages %>

  <p>
    <%= f.label :first_name %><br />
    <%= f.text_field :first_name %>
  </p>
  <p>
    <%= f.label :last_name %><br />
    <%= f.text_field :last_name %>
  </p>
  <p>
    <%= f.label :file %><br />
    <%= f.file_field :file %>
  </p>

  <p>
    <%= f.label :photo %><br />
    <%= f.file_field :photo %>
  <p>
    <%= f.submit 'Update' %>
  </p>

<% end %>

<%= link_to 'Show', @user %> |
<%= link_to 'Back', users_path %>

Then, I wanted to integrate SWFUpload in my application. I tried to follow this tutorial and run the test project without any success: the browse button doesn't open a file dialog and an error #2176 is threw which is about the selectFiles() method.

First, the problem is about Flash v.10 that isn't compatible with the old version of SWFUpload (2.1.0) included with the project : selectFiles() is now deprecated. So I tried to upgrade to SWFUpload v. 2.2.0 which now use a button_placeholder_id setting but I can't get any example to work.

So i'm a bit lost about how to use SWFUpload initialization and about and to use it in my form so I can upload and save a photo. Any helps?

Answer 1

Try adding an :obsubmit => false to the :html hash in form_for. Then instead of using a f.submit button, make it a regular button that calls javascript onclick. In the javascript it calls, do your SWFUpload initialization, and pass it the id of the :photo file_field, then submit the form via javascript.

Answer 2

You can try using easy-swf-upload plugin

You will just need to insert one helper and maybe adopt css

Answer 3

Here's a nice writeup.

Answer 4

For passing the photo file field id to SWFUpload, the id of your field is going to be user_photo (from <input type='file' id='user_photo'.../>), so initialize swfupload with

var swfupload = new SWFUpload({button_placeholder_id:'user_photo' ... });

which will replace the file field with a swf uploader.

Bear in mind that by default the file will get uploaded as the 'Filedata' parameter. Technically you could change that to 'user[photo]', but apparently that doesn't work on Linux, so you may have to do some shimmying on the server-side to move that into the right place.