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!

  • Feb 28

    This article is about how to add a calendar date picker to your Ruby Rails Web page.

    There are a couple of ways developers use the selected dates, either to store as data in the database or a variable used in the program’s logic.

    I will cover both ways of doing it in this blog. There are multiple date and time picker libraries around. The one I’m using is the “Calendar Date Select” developed by Tim Herber.

    1.) First the plug-in needs to be installed in your project. Go to your project directory and run the following command:

    ruby script/plugin install http://calendardateselect.googlecode.com/svn/tags/calendar_date_select/

    2.) In your view load prototype and calendar date select.

    <%= javascript_include_tag :defaults %>
    <%= calendar_date_select_includes %>

    Method #1: Passing the select date in a variable

    3.) Add the following code to your view. “bday” is the variable the selected date will be stored in. @start_date_range is default value for the pickere and year_range specifies the year range:

    <div id=”calendar”>&nbsp; Birth Date &nbsp;
    <%= calendar_date_select_tag “bday”, @start_date_range, :year_range => 10.years.ago..0.years.ago  %>
    </div>

    Pop Up Date Selector

    Result from the code above

     

    4.) In Your controller, to pick up the bday variable, put a code like this:

     if !params[:bday].nil?

    @birthdate = Date.parse(params[:bday]).to_s if !params[:bday].nil?

    end

    Method #2. Passing the selected date into a database column:

    5.) If you would want to update your model directly this is an example.

    In your view enter the following for birthrate input. The column name is birthdate.:

          <% form_for :model do |form| %>
          <table>
          <tr>
          <% fields_for :model do |f| %>
          <td> Select Birth Date: <%= f.calendar_date_select :birthdate, :embedded => true %> </td>
          <% end %>
          </tr>
          </table>
          <% end %>

    Notice that I set embed  to true. This changes the date picker from a pop-up to a non-pop up date picker (See picture).

    Embeded Date Selector

    Result from the code above

    6.) To save the birthdate in your controller, simply apply the following assuming “birthdate” is the column name you are updating.

        if request.post? and @model.save
          …
        end

    Script will automatically determine the date type of your database table. And save the selected date.

    Method #2 allows you to take advantage of the error checking and all the goodies in the Rails framework.

    Tim’s demo site is down but this site contains a good demo:

    http://electronicholas.com/calendar

    Hope this was helpful and happy coding!