Topic: Image uploads and resizing for Rails models with mini-magick

You can download a sample application which uses the method described here at http://www.campdojo.com/assets/zip/mage.zip

It uses a rails scaffold though.

We've all heard of RMagick but I hear it uses quite a bit of memory which can in turn be an issue for users of shared hosting. Here's a small tutorial on how to enable image uploads and resizing with mini-magick.

First of all you will need to install mini-magick. I would normally recommend you type in "gem install mini_magick" into a command prompt but you are automatically assuming your rails hosting provider has support for mini-magick. Worse, the "gem install mini_magick" command doesn't seem to work on Windows for whatever reason. So here is another method of doing this.

Go to the rubyforge project site for mini-magick at http://rubyforge.org/frs/?group_id=1358

Download mini_magick-1.2.0.zip from the list of files. Or just download the latest version. There will surely be something new at some point.

The next thing you have to download is ImageMagick. The website for ImageMagick is found at http://www.imagemagick.org/script/binary-releases.php

The windows releases seem to be found near the bottom of the page. If you're on windows, get the file named ImageMagick-6.3.0-0-Q16-windows-dll.exe or something similar.

Next, unzip the mini_magick-1.2.0.zip file you got from RubyForge. Go to the lib folder and copy the file "mini_magick.rb" to the lib folder of your rails application.

Now, I'm assuming you are uploading an image for a rails model. We'll be working here with a model named Product. The first thing you can do is to create a partial for image uploads. This partial should be rendered in the form for adding or editing a new product. Lets call it _image.rhtml. Here goes an example:

<div>
<p>Upload an image for your product</p>
<input type="hidden" id="picture_id" value="<%= @product.id %>" name="picture[id]"/><br/>
<input type="file" id="picture_file"  name="picture[file]"/><br />
</p>
</div>

Next, I'm assuming you have the main form for creating or editing a product. It should have it's multipart value set to true. Here's how to do it.

For the forms where you will be editing a product, you can use this:

<%= start_form_tag({:action => 'edit', :id => @product}, :multipart => true) %>

For the forms where you will be adding a new product, you can use this:

<%= start_form_tag({:action => 'new'}, :multipart => true) %>

You can see, that they will both generate very normal form tags except that the value of multipart is set to true. Now, inside this form, you should render the partial for _image. You can do it like so:

<%= render :partial => 'image', :object => @product %>

Very good. Next, it is good to create a model to store pictures. Here is how I wrote mine.

    require 'mini_magick'
     
    class Picture
     
      attr_accessor :id, :file
     
      def initialize(id,file)
        @id = id
        @file = file
       @filename =  base_part_of(file.original_filename)
       @content_type = file.content_type.chomp 
     end
   
     def base_part_of(file_name)
      name = File.basename(file_name)
       name.gsub(/[^\w._-]/, '')
     end
   
     def save
       is_saved = false
       begin
         if @file
          #using @id, find the id of the User, then use the id to create the title
          if @content_type =~ /^image/
  #instead of product = Product.find, you can say dog = Dog.find or whatever corresponds to your model.
             current_product = Product.find(@id.to_i)
             #Make the directory for the id
             Dir.mkdir("#{RAILS_ROOT}/public/images/products/#{@id}") unless File.exist?("#{RAILS_ROOT}/public/images/products/#{@id}")
             #Then create the temp file
             File.open("#{RAILS_ROOT}/public/images/products/#{@id}/#{@filename}", "wb") do |f|
              f.write(@file.read)
            end
            product_image_crop("#{@filename}")
            #update the current product
            image_names = product_image_names("#{@filename}")
            File.open("#{RAILS_ROOT}/public/yo.txt", "wb") do |f|
                f.write(image_names)
            end
current_product.update_attributes("image_square" => image_names[0], "image_small" => image_names[1], "image_medium" => image_names[2], "image_original" => image_names[3])
            is_saved = true
            end
         end
      rescue
       end
       return is_saved
    end
   
  def product_image_crop(product_image_title)
 
        #product_title = product_title.squeeze.gsub(" ","_").downcase
        #find the extension for this file
        image_file_extension = product_image_title[product_image_title.rindex(".") .. product_image_title.length].strip.chomp
        image = MiniMagick::Image.from_file("#{RAILS_ROOT}/public/images/products/#{@id}/#{product_image_title}")
       
        image.resize "400X300"
        image.write("#{RAILS_ROOT}/public/images/products/#{@id}/#{@id}_medium#{image_file_extension}")       

        image.resize "240X180"
        image.write("#{RAILS_ROOT}/public/images/products/#{@id}/#{@id}_small#{image_file_extension}")   
       
        image.resize "50X50"
        image.write("#{RAILS_ROOT}/public/images/products/#{@id}/#{@id}_square#{image_file_extension}")
   
        #Finally, rename the originally uploaded image
        File.rename("#{RAILS_ROOT}/public/images/products/#{@id}/#{product_image_title}", "#{RAILS_ROOT}/public/images/products/#{@id}/#{@id}_original#{image_file_extension}")

  end
   
  def product_image_names(product_image_title)
     image_file_extension = product_image_title[product_image_title.rindex(".") .. product_image_title.length].strip.chomp
    #Generate an array containing the url of all the images
     ["/images/products/#{@id}/#{@id}_square#{image_file_extension}",  "/images/products/#{@id}/#{@id}_small#{image_file_extension}","/images/products/#{@id}/#{@id}_medium#{image_file_extension}",  "/images/products/#{@id}/#{@id}_original#{image_file_extension}"]
   end
   
   end


Now, if I could explain what this class does. First of all, it should be named "picture.rb" and should be saved in your models directory. But please note that it does not inherit from ActiveRecord::Base.

Now what is happening here. First of all, if you look at the partial, _image.rhtml which we created earlier, You will notice that it has two fields, picture_id and picture_file. Now, we can create a new Picture object using Picture.new(id,file), so id corresponds to picture_id and picture_file corresponds to the file being uploaded. More on this later. Now the Picture model has a method called save and this returns true or false. If it returns true, then the image has been saved.

At this point, you should probably change the migration for your Product model. You add the following:

      t.column :image_square, :string
      t.column :image_small, :string
      t.column :image_medium, :string
      t.column :image_original, :string

So you have four columns for different images. I'm assuming you will want 4 different versions  of your image. From a really small thumbnail to the original image.

The method product_image_names finds the url for each picture. Note that each image is saved under the id for the product. Images for a product with an id of 1, are saved under the folder, /images/products/1 e.t.c

Anyway, still more work to do. Go to your Product model and add the following.

First, add this filter to your product model

before_destroy :delete_image_directory

Here is the actual method which should also be added to the Product model.

  #Method to delete a directory
  def rmtree(directory)
  Dir.foreach(directory) do |entry|
    next if entry =~ /^\.\.?$/     # Ignore . and .. as usual
    path = directory + "/" + entry
    if FileTest.directory?(path)
      rmtree(path)
    else
      File.delete(path)
    end
  end
  Dir.delete(directory)
end

  def delete_image_directory
    image_dir = "#{RAILS_ROOT}/public/images/products/#{self.id}"
    if File.exist?(image_dir)
        begin
            rmtree(image_dir)
        rescue
        end
    end
  end


The above methods simply delete the directory of images for your product.

Next, the controllers.

Let's say you are adding products via the admin interface. So the controller would be AdminController.

So let's say you are using the AdminController. Inside this controller, add this method:

  def save_picture
    @picture = Picture.new(params[:picture][:id], params[:picture][:file])
    resp = ""
    if @picture.save
        resp = 'and it\'s picture was successfully uploaded'
    else
        if Product.find(params[:picture][:id]).image_square != nil
            resp = ''
        else
          if params[:picture][:file].class == StringIO
            resp = 'but you have not yet chosen a picture for it'
          else
            resp = 'but I could not upload the picture because it is not a valid Jpeg, Gif or Png file'
          end
        end
    end
    return resp
  end

Now, I'm assuming you have save and edit methods for your product model here also. Here's mine.

  def new
    reps = ""
    if request.post?
      @product = Product.new(params[:product])
      if @product.save
        if params[:picture]
            params[:picture][:id] = @product.id
            reps = save_picture
        end
        flash[:notice] = "A new product was successfully added #{reps}"
        redirect_to :action => 'list'
      end
    else
      @product = Product.new
    end
  end

  def edit
    reps = ''
        @product = Product.find(params[:id])
    if request.post?
      if @product.update_attributes(params[:product])
        if params[:picture]
            params[:picture][:id] = @product.id
            reps = save_picture
        end
        flash[:notice] = "The product was successfully edited #{reps}"
        redirect_to :action => 'show', :id => @product
      end
    end
  end


Note that reps simply tells you if the product image has been saved or not. Now you're basically done. If you want to display an image for your product, you can simply add in your view.

<%= @product.image_medium %>

or

<%= @product.image_small %>

A small note on mini-magick commands though.

Let's say I want to make one, and only one change to a file. To load it, I use the new command.

image = MiniMagick::Image.new("william.jpg")
image.resize "240X180"

Using MiniMagick::Image.new means that any change to the file is permanent. If william.jpg had dimensions 1028X876, it's dimensions will be permanently changed to 240X180.

Now if we want to save multiple versions of the file, this is what we need to do.

image = MiniMagick::Image.from_file("william.jpg")

#resize to 400X300
image.resize "400X300"
#now save it with a different name
image.write("william_medium.jpg")

image.resize "240X180"
image.write("william_240.jpg")


So this will leave us with three image. The original william.jpg, william_medium.jpg and william_240.jpg.

Last edited by daibatzu (2006-10-24 06:32:53)

Re: Image uploads and resizing for Rails models with mini-magick

That's cool .
I use the MiniMacgick a while but one thing does not work
.resize or .thumbnail
actualy the arguments like .resize "width X hight".
For example the oryginal image has 252x144 and I want to resize to 12x12 so I do:
.resize "12x12" but results are 12x7

the arguments like "12x" or "x12" works because I got "12x7" and "21x12"
The same for a .thumbnail
What I do wrong ?

Re: Image uploads and resizing for Rails models with mini-magick

misiek, that's because it's trying to scale the image. resizing to 12x12 may not make the image look good

Re: Image uploads and resizing for Rails models with mini-magick

There is a way to scale image like I need with Minimagick ?

And one more thing .

How to check an error for upload image if the file actually is not an image.
I changed txt file on image.gif and that's not gonna work.
I have tried like begine rescue and, but does not work in MiniMagick, works for RMagick.

Thanks

Last edited by misiek (2006-11-20 15:47:04)

Re: Image uploads and resizing for Rails models with mini-magick

I have this up and running on my server, but when the images are written to the server, the permissions are 0600 and the images don't show up.

I tried adding @photo.chmod(0755) in your save_picture method, and I also tried image.chmod(0755) in the Photo.rb model.

Do you know what I'm doing wrong?

Re: Image uploads and resizing for Rails models with mini-magick

by putting the images in a folder how do you think best to extend this tutorial to have more than one image for a product?

Re: Image uploads and resizing for Rails models with mini-magick

Hi,

I'm getting this error message when loading the page.

NoMethodError in PeopleController#new
undefined method `original_filename' for #<String:0x47a9c08>...

My error is somewhere in this code block...

 def initialize(id,file)
        @id = id
        @file = file
        @filename =  base_part_of(file.original_filename)
        @content_type = file.content_type.chomp
    end
   
    def base_part_of(file_name)
        name = File.basename(file_name)
        name.gsub(/[^\w\.\-]/,'_')
    end

Does anyone know why am i getting this error message.

Any help would be highly appreciated.

Thanks & best regards,

Rajesh

Re: Image uploads and resizing for Rails models with mini-magick

rajesh0363 wrote:

Hi,

I'm getting this error message when loading the page.

NoMethodError in PeopleController#new
undefined method `original_filename' for #<String:0x47a9c08>...

My error is somewhere in this code block...

 def initialize(id,file)
        @id = id
        @file = file
        @filename =  base_part_of(file.original_filename)
        @content_type = file.content_type.chomp
    end
   
    def base_part_of(file_name)
        name = File.basename(file_name)
        name.gsub(/[^\w\.\-]/,'_')
    end

Does anyone know why am i getting this error message.

Any help would be highly appreciated.

Thanks & best regards,

Rajesh

Hi Rajesh,
I suppose, that you have no file selected for upload. In this case there is no metadata available for the content_type and the original_filename attributes.
To solve this problem, I just have checked for the presence of the file. If there is no file present you don't have to initialize anything.

 def initialize(id,file)
        if file != ""
          @id = id
          @file = file
          @filename =  base_part_of(file.original_filename)
          @content_type = file.content_type.chomp 
        end 
     end

THat's all. This should work.

Best wishes,
wowo

Last edited by wowo (2007-06-11 19:48:22)

Re: Image uploads and resizing for Rails models with mini-magick

Thanks Wowo...

Re: Image uploads and resizing for Rails models with mini-magick

I have everything done, but I found the application not working...

when selected the files, then press "submit", i think it dose goes through the picture.rb correctly, but it does not create any directory or do anything to enter sth to the images columns in the table, and there are no files uploaded at all..

Any clues for the problem??
Thanks!

Last edited by 20dreamer (2007-07-08 08:58:45)

Re: Image uploads and resizing for Rails models with mini-magick

This works great, thanks! One question though:

How can I validate the image upload field in the form when register a new article?

This is my form:

<input type="hidden" id="picture_id" value="<%= @article.id %>" name="picture[id]"/>
<input type="file" id="picture_file"  name="picture[file]"/>

I have tried the following in my article-model to validate the image-field without any luck:

validates_presence_of :picture

validates_presence_of :file

validates_presence_of :picture[file]

Since the fields in my database is named image_square, image_small, image_medium, image_original, I have also tried this:
validates_presence_of :image_square, :image_small, :image_medium, :image_original

Nothing seems to work. Anyone got some input on this? Isn't it possible to validate a file-field with "validates_presence_of" ?

Re: Image uploads and resizing for Rails models with mini-magick

20dreamer wrote:

I have everything done, but I found the application not working...

when selected the files, then press "submit", i think it dose goes through the picture.rb correctly, but it does not create any directory or do anything to enter sth to the images columns in the table, and there are no files uploaded at all..

Any clues for the problem??
Thanks!

You need to manually create this directory first #{RAILS_ROOT}/public/images/products/

worked for me, cheers!

Re: Image uploads and resizing for Rails models with mini-magick

The link http://www.campdojo.com/assets/zip/mage.zip don't work. Is there anyone that still have it?

Re: Image uploads and resizing for Rails models with mini-magick

What if the user should have to upload an image? How can you check to see if the user actually have selected an image, ant not let the user submit the form without an image?

wowo wrote:
rajesh0363 wrote:

Hi,

I'm getting this error message when loading the page.

NoMethodError in PeopleController#new
undefined method `original_filename' for #<String:0x47a9c08>...

My error is somewhere in this code block...

 def initialize(id,file)
        @id = id
        @file = file
        @filename =  base_part_of(file.original_filename)
        @content_type = file.content_type.chomp
    end
   
    def base_part_of(file_name)
        name = File.basename(file_name)
        name.gsub(/[^\w\.\-]/,'_')
    end

Does anyone know why am i getting this error message.

Any help would be highly appreciated.

Thanks & best regards,

Rajesh

Hi Rajesh,
I suppose, that you have no file selected for upload. In this case there is no metadata available for the content_type and the original_filename attributes.
To solve this problem, I just have checked for the presence of the file. If there is no file present you don't have to initialize anything.

 def initialize(id,file)
        if file != ""
          @id = id
          @file = file
          @filename =  base_part_of(file.original_filename)
          @content_type = file.content_type.chomp 
        end 
     end

THat's all. This should work.

Best wishes,
wowo

Re: Image uploads and resizing for Rails models with mini-magick

Hi there!

Great tutorial that i try to apply to my application.
The thing is however that it does not work all the way described.
File gets uploaded, the record is sent to database but the image thumbs are not created.

Also i was wandering why do You check and try to open a yo.txt file? Could anyone please try explain this part to me?

 image_names = product_image_names("#{@filename}")
     File.open("#{RAILS_ROOT}/public/yo.txt", "wb") do |f|
         f.write(image_names)
       endp

And one last thing, is there any reasonable way to check the values of variables inside a model? Something similar to the debug() of controller variables? Some getter perhaps?

Any help would be much appreciated.

Best of luck

Michal

Re: Image uploads and resizing for Rails models with mini-magick

I followed the steps given by the author strictly, it works except for the columns image_small, image_large, image_square, image_original are all nil and the image doesn't get showed (of course, nothing in the database).
I debugged with Netbeans, set break point at "save" method of Picture model, when I stepped to line 28, it jumped directly to line 45, I don't know why this happened, any info will be appreciated, thanks a lot.


   1.     require 'mini_magick'
   2.     
   3.     class Picture
   4.     
   5.       attr_accessor :id, :file
   6.     
   7.       def initialize(id,file)
   8.         @id = id
   9.         @file = file
  10.        @filename =  base_part_of(file.original_filename)
  11.        @content_type = file.content_type.chomp 
  12.      end
  13.     
  14.      def base_part_of(file_name)
  15.       name = File.basename(file_name)
  16.        name.gsub(/[^\w._-]/, '')
  17.      end
  18.     
  19.      def save
  20.        is_saved = false
  21.        begin
  22.          if @file
  23.           #using @id, find the id of the User, then use the id to create the title
  24.           if @content_type =~ /^image/
  25.   #instead of product = Product.find, you can say dog = Dog.find or whatever corresponds to your model.
  26.              current_product = Product.find(@id.to_i)
  27.              #Make the directory for the id
  28.              Dir.mkdir("#{RAILS_ROOT}/public/images/products/#{@id}") unless File.exist?("#{RAILS_ROOT}/public/images/products/#{@id}")
  29.              #Then create the temp file
  30.              File.open("#{RAILS_ROOT}/public/images/products/#{@id}/#{@filename}", "wb") do |f|
  31.               f.write(@file.read)
  32.             end
  33.       product_image_crop("#{@filename}")
  34.       #update the current product
  35.       image_names = product_image_names("#{@filename}")
  36.       File.open("#{RAILS_ROOT}/public/yo.txt", "wb") do |f|
  37.         f.write(image_names)
  38.       end
  39. current_product.update_attributes("image_square" => image_names[0], "image_small" => image_names[1], "image_medium" => image_names[2], "image_original" => image_names[3])
  40.             is_saved = true
  41.             end
  42.          end
  43.       rescue
  44.        end
  45.        return is_saved
  46.     end
  47. 
  48.   def product_image_crop(product_image_title)
  49.   
  50.     #product_title = product_title.squeeze.gsub(" ","_").downcase
  51.     #find the extension for this file
  52.     image_file_extension = product_image_title[product_image_title.rindex(".") .. product_image_title.length].strip.chomp
  53.     image = MiniMagick::Image.from_file("#{RAILS_ROOT}/public/images/products/#{@id}/#{product_image_title}")
  54.   
  55.     image.resize "400X300"
  56.     image.write("#{RAILS_ROOT}/public/images/products/#{@id}/#{@id}_medium#{image_file_extension}") 
  57. 
  58.     image.resize "240X180"
  59.     image.write("#{RAILS_ROOT}/public/images/products/#{@id}/#{@id}_small#{image_file_extension}")
  60.   
  61.     image.resize "50X50"
  62.     image.write("#{RAILS_ROOT}/public/images/products/#{@id}/#{@id}_square#{image_file_extension}")
  63. 
  64.     #Finally, rename the originally uploaded image
  65.     File.rename("#{RAILS_ROOT}/public/images/products/#{@id}/#{product_image_title}", "#{RAILS_ROOT}/public/images/products/#{@id}/#{@id}_original#{image_file_extension}")
  66. 
  67.   end
  68.     
  69.   def product_image_names(product_image_title)
  70.      image_file_extension = product_image_title[product_image_title.rindex(".") .. product_image_title.length].strip.chomp
  71.     #Generate an array containing the url of all the images
  72.      ["/images/products/#{@id}/#{@id}_square#{image_file_extension}",  "/images/products/#{@id}/#{@id}_small#{image_file_extension}","/images/products/#{@id}/#{@id}_medium#{image_file_extension}",  "/images/products/#{@id}/#{@id}_original#{image_file_extension}"]
  73.    end
  74.     
  75.    end

Re: Image uploads and resizing for Rails models with mini-magick

leomayleomay wrote:

I followed the steps given by the author strictly, it works except for the columns image_small, image_large, image_square, image_original are all nil and the image doesn't get showed (of course, nothing in the database).
I debugged with Netbeans, set break point at "save" method of Picture model, when I stepped to line 28, it jumped directly to line 45, I don't know why this happened, any info will be appreciated, thanks a lot.

Hi leomayleomay,

the jump from line 28 to 45 it's because you didn't create folder products as ianare  wrote:

ianare wrote:

You need to manually create this directory first #{RAILS_ROOT}/public/images/products/

worked for me, cheers!

Try to comment the line with "rescue" and you should get an error.

Re: Image uploads and resizing for Rails models with mini-magick

Hi all.
I have a problem, I hope you can help me...
I get the error:
/bin/sh: identify: not found
ImageMagick command (identify "/tmp/d56242f4d5cb7920becf1712dc369132_minimagick8458-94.jpg") failed: Error Given 32512
on this line
mini_magick.rb:124:in `run_command'
P.S. My OS is Ubuntu 8.04.

Re: Image uploads and resizing for Rails models with mini-magick

Never mind... I had to install the imagemagick package.
Thanks anyway.

20

Re: Image uploads and resizing for Rails models with mini-magick

One issue is that this creates images that will load a new image, but won't change the image names.  So browsers need to "reload" the view in order to get the new image.  You can fix this by adding ?#{Time.now.to_i} after the image reference.