SilverTab’s Corner

Recently, I had to come up with a multiple file upload form that works with the file_column plugin. My site was already using mootools as it’s main JS framework so I wanted to come up with a solution that would be mootools friendly.

Luckily, I found this great mootools plugin that handles multiple file upload in an elegant way, so I decided to start with that as a base.

I had to modify the script, mostly because file_column requires a hidden field for every file field there are in your form. I provided a link to this modified version at the bottom of this post.

Here is a step by step guide to make this work (I am assuming you are familiar with file_column already).

For this example, let’s pretend I have the following models:

• User (my user model)
• UserPicture (a picture uploaded by a user)

My UserPicture model has 2 attributes: user_id and image(the file_column). The relationships are as follow: User has_many UserPictures, and UserPicture belongs_to User

I will use 1 view to allow the user to upload pictures. That view will contain the form with the file fields. This is what the view’s code looks like:

<h1>Picture Upload</h1>
<%= javascript_include_tag “Stickman.MultiUpload.js“ %>
<script type=“text/javascript“>
  window.addEvent(‘domready‘, function(){
    new MultiUpload( $( ‘main_form‘ ).user_picture, 3, ‘[{id}][image]‘, true, true, ‘[{id}][image_temp]‘ );
  });
</script>

<form id=“main_form“ method=“POST“ enctype=“multipart/form-data“ action=“/users/uploadpictures“>
  <input type=“file“ name=“user_picture“>
  <br clear=“all“/><br>
  <%= submit_tag “Submit“ %>
</form>

The important parts are: My file input needs to have the class name as it’s “name” attribute, in this case; user_picture. If your model name is different, change the file input’s name to reflect your model name. Also, if your file_column’s name is NOT “image”, you need to change this line:

new MultiUpload( $( ‘main_form‘ ).user_picture, 3, ‘[{id}][image]‘, true, true, ‘[{id}][image_temp]‘ );

So it reflects your file_column’s name (change both [image] and [image_temp]) so if your file_column’s name is “picture”, this line would become:

new MultiUpload( $( ‘main_form‘ ).user_picture, 3, ‘[{id}][picture]‘, true, true, ‘[{id}][picture_temp]‘ );

What this will do, is to allow users to upload up to 3 pictures (you can change that in the parameters). For every new picture uploaded, the javascript creates a new file field, and a new hidden field, required by file_column, so they will look like this in the generated html:
<input type=”file” name=”[user_picture][x][image]”>
<input type=”hidden” name=”[user_picture][x][image_temp]”>

Where “x” = an incrementing ID (0, 1, 2…)

Next is your controller. In this case, I chose to send the form to “uploadpictures” action of the “users” controller. This is what this controller needs to look like:

def uploadpictures
  params[:user_picture].each do |id, image|
    @user_picture = UserPicture.new(image)
    @user_picture.user_id = @current_user.id
    @user_picture.save
  end
end

So basically, for each user_picture in the params, I create a new UserPicture model instance, passing the “image” parameter… For my own needs, I have to track the user_id too so the picture is associated to a user. This could be done with a hidden field in the upload form, in my case, sessions are already taking care of it.

And that’s it basically… all the pictures should be uploaded correctly, following file_column’s directory structure, and inserted in the database.

NOTE: In my example, mootools was included in my layout, so I didn’t need to re-include it, but YOU WILL need to include it BEFORE your include the multiple upload script.

To get it working with my modified version, just replace the .js file with mine, and put it in /public/javascripts.

To get the CSS working, I just copied the code of the .css file and added it to my own stylesheet (it shouldn’t overwrite any of your styles but double check to make sure).

And finally, I placed the image that came with it under /public/images/cross_small.gif

The modified version of the Multiple File Upload script can be found here. I suggest you also download the original version here to get the CSS and image file that comes with it.

Posted on Tuesday, December 18th, 2007 at 7:41 pm in General, Rails, Web Development | rss feed for comments| Leave a response, or trackback