Uploading and Resizing Images in Ruby on Rails

ImageMagick

In my previous article on using ImageMagick and Mini-Magick to manipulate images in Ruby on Rails, I talked about how to install all of the goodies you’d need to work with images in Rails. I thought I’d expand on this a little bit more and give an example on how I used this cool stuff to upload images and resize them in my Rails application.

You’ll need to set up some HTML code to upload the file to the server. Something like this will suffice:

<% form_tag :action => 'upload', :multipart => true, :id => 'upload_form' do -%>
     <input style="margin-left: 5px;" type="file" id="imageone_file" name="imageone[file]" />
<% end -%>

Now you’ll want to build a model (based on ActiveRecord or not) to save your image for you. For my use, I did based my image model on an ActiveRecord class since I wanted to at least store the file name of the image in my database. But doing that is up to you. Anyway, on to saving the image. In your class, you want to grab the data for the image file in the posted form and save it to the file system. Something like this will suffice:

def image_save(file)
    @file = file
    @content_type = file.content_type.chomp
    @original_filename = base_part_of(file.original_filename)
    @extension = @original_filename[@original_filename.rindex(".") .. @original_filename.length].strip.chomp
    
    self.file_name = "#{epoch_time()}#{@extension}"
    
    is_saved = false
    begin
      if self.file
        if self.content_type =~ /^image/
          # Make the directory for the id of the listing if it doesn't exist
          Dir.mkdir("#{RAILS_ROOT}/public/images/originals/") unless File.exists?("#{RAILS_ROOT}/public/images/originals/")
          
          # What's the new file name?
          
          # Create the temporary file
          File.open("#{RAILS_ROOT}/public/images/originals/#{self.file_name}", "wb") do |f|
            f.write(@file.read)
            f.close
          end
          
          # Crop the image to the sizes we need
          crop()
          
          is_saved = true
        end
      end
    rescue
    end
    
    return is_saved
end

So what are we doing here? First, we grab the content type of the file, its original file name, and the extension of the file. We save this information out to attributes defined on the model itself, i.e.

attr_accessor :file, :content_type, :original_filename, :extension

Then we check to make sure the directory where we want to save the original file exists, and if not, create it. Then we save the file itself. Once we have the file saved, you’ll notice I call a method called crop(). This is my method that resizes the original image and saves the resized images to the file system. How do I do that? Check this out:

  def crop()
    image = MiniMagick::Image.from_file("#{RAILS_ROOT}/public/images/originals/#{self.file_name}")
    if !image.nil?
      # Resize to 360x360
      image.resize "360x360"
      image.write("#{RAILS_ROOT}/public/images/360x360/#{self.file_name}")

      # Resize to 240x240
      image.resize "240x240"
      image.write("#{RAILS_ROOT}/public/images/240x240/#{self.file_name}")

      # Resize to 120x120
      image.resize "120x120"
      image.write("#{RAILS_ROOT}/public/images/120x120/#{self.file_name}")

      # Resize to 80x80
      image.resize "80x80"
      image.write("#{RAILS_ROOT}/public/images/80x80/#{self.file_name}")
      
      # Resize to 40x40
      image.resize "40x40"
      image.write("#{RAILS_ROOT}/public/images/40x40/#{self.file_name}")
    end
  end

As you can tell, I needed several different image sizes. You start with the lowest size and work your way down. Not doing this gets you funky sized images. MiniMagick makes it really easy to just open the file and set the new size for the image and then just write it out to where you want it. Nice!

Leave a Reply

Your email address will not be published. Required fields are marked *