Techblog

Technical Blog about all things computer

  • Mar 20

    Ruby Rails has a very good plug-in for managing picture uploads to your website. The File Column Image Updater plug-in has been around for a while and widely used for uploading pictures for a website.

    The setup is simple and you have the code on how to upload a picture or display it, it’s not difficult to use.

    1.)  First download the plug-in to your project:

    ruby /script/plugin install http://opensvn.csie.org/rails_file_column/plugins/file_column/trunk

    2.) Create a Database model to store the file names.

    ruby script/generate model Photo

    3.) Add the following to create photos migration file:

    class CreatePhotos < ActiveRecord::Migration
    create_table :photos do |t|
    t.column :super_user_id,           :integer,:null => false
    t.column :name,                        :string
    t.column :picture,                     :string
    t.timestamps
    end
    add_index :photos, :id
    add_index :photos, :super_user_id

      def self.down
    drop_table :photos
    end
    end

    4.) Creat the database table

    rake db:migrate

    5.) Edit the photo model file and add the following..

    class Photo < ActiveRecord::Base
    file_column :picture,   :magick => {
    :versions =>
    {
    :small => {:crop => "1:1", :size => "155×155!" },
    :thumb => {:crop => "1:1", :size => "50×50!" },
    :medium => { :size => "640×480" }
    }
    }

       validates_file_format_of :picture, :in => ["gif", "png", "jpg"]

    When picture is saved the file column updater plug-in will create three versions, small, medium and thumb nail version using RMagick. It will also validate for gif, png or jpg extension. Modify this to suit your needs.

    6.) In your upload photo view put the following code to upload one picture at a time:

     

    <%= form_tag( { :action => ‘addphoto’ }, :multipart => true ) %>
    <p><label for="user_name">Name</label><br/>
    <%= text_field ‘photo’, ‘name’ %></p>
    <p><label for="user_picture">Picture</label><br/>
    <%= file_column_field "photo", "picture" %>
    <%= submit_tag "Create" %>

     

    7.) This is the code in the controller to process the view code:

      def addphoto
    @superuser = SuperUser.find_by_id(session[:super_user_id])

        @photo = Photo.new(params[:photo])
    @photo.super_user_id  = @superuser.id

        if request.post?
    @photo.save
    flash[:notice] =  "Image Saved"
    end
    end

    8.) To display the image add this to your view.

    <%= image_tag url_for_file_column ‘photo’, ‘picture’  if !@photo.picture.nil? %>

    and make sure you have something like this in your controller to load the photo from the database:

    @photo = Photo.find_by_id(photo_id)

    9.) If you want users to upload multiple pictures. In this example five pictures. This is what I used in my view:

    <%= form_tag( { :action => ‘addphotos’ }, :multipart => true ) %>
    <table>
    <% for i in 1..5 %>
    <tr>
    <td> Caption: </td>
    <td><input id="<%= "picture_#{i}_caption" %>" name="<%= "picture[#{i}][name]" %>" size="30" type="text" /></td>
    <td> File :</td>
    <td>
    <input id="<%= "picture_#{i}_filename" %>" name="<%= "picture[#{i}][picture]" %>" size="30" type="file" />
    </td>
    </tr>
    <% end %>
    <tr>
    <td> </td>
    <td><%= submit_tag "Upload" %></td>
    </tr>
    </table>
    </form>

    10.) This is the code for the controller:

    def addphotos

         @superuser = SuperUser.find_by_id(session[:super_user_id])
    @photos = Photo.find(:all, :conditions => ["super_user_id = ? AND active=’Y’" ,session[:super_user_id] ] )

         #Multiple pictures
    if !params[:picture].nil?
    params[:picture].each do |file_id,attr|
    id = file_id.to_i
    picture = Photo.new(attr)
    picture[:super_user_id] = @superuser.id
    if !picture.picture.nil?
    if  picture.save
    flash[:notice] =  "Image Saved"
    @photos = Photo.find(:all, :conditions => ["super_user_id = ?" ,session[:super_user_id] ] )
    end
    end
    end
    end
    end

    11.) To display the picture on the addphoto view, this is the code.

    <% for @photo in @photos %>
    <% if !@photo.picture.nil? %>

    <table>
    <tr>
    <td><%= image_tag url_for_file_column(‘photo’, ‘picture’ ,’thumb’ )  %>      </td>
    <td><%= @photo.name %></td>
    </tr>
    </table>
    <% end %> 
    <% end %>

    If you want to display the other the small or medium photo instead of thumbnail, simply change thumb to the corresponding size you want to see.

     

    Hope this was helpful and happy coding!