Image uploads and resizing for Rails models with mini-magick

daibatzu · 2006-10-24 09:41:02

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:

Code : - fold - unfold

<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:

Code : - fold - unfold

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

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

Code : - fold - unfold

<%= 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:

Code : - fold - unfold

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

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

Code : - fold - unfold

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:

Code : - fold - unfold

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

Code : - fold - unfold

before_destroy :delete_image_directory

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

Code : - fold - unfold

#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:

Code : - fold - unfold

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.

Code : - fold - unfold

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.

Code : - fold - unfold

<%= @product.image_medium %>

or

Code : - fold - unfold

<%= @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.

Code : - fold - unfold

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.

Code : - fold - unfold

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 10:32:53)

misiek · 2006-11-17 16:38:55

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 ?

daibatzu · 2006-11-20 16:15:55

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

misiek · 2006-11-20 19:40:45

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 19:47:04)

jayjee · 2006-12-29 21:06:18

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?

letimati · 2007-05-09 14:43:48

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?

rajesh0363 · 2007-06-07 13:05:13

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...

Code : - fold - unfold

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

wowo · 2007-06-11 21:23:03

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...

Code : - fold - unfold

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.

Code : - fold - unfold

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 23:48:22)

rajesh0363 · 2007-06-12 19:36:04

Thanks Wowo...

20dreamer · 2007-07-08 10:29:31

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 12:58:45)

Hans_Oslo · 2007-07-13 11:27:26

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:

Code : - fold - unfold

<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:

Code : - fold - unfold

validates_presence_of :picture

Code : - fold - unfold

validates_presence_of :file

Code : - fold - unfold

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:

Code : - fold - unfold

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" ?

ianare · 2007-07-18 06:21:47

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!

G.Lindqvist · 2007-08-04 13:19:31

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

Hans_Oslo · 2007-08-15 10:54:38

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...

Code : - fold - unfold

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.

Code : - fold - unfold

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

EdgeCrusher · 2007-09-26 11:22:47

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?

Code : - fold - unfold

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

leomayleomay · 2008-04-13 14:51:23

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

michal · 2008-04-15 22:45:24

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.

mirtzi · 2008-06-25 16:01:57

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.

mirtzi · 2008-06-25 16:08:59

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

ice · 2008-09-20 16:32:38

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.

#1 2006-10-24 09:41:02

#2 2006-11-17 16:38:55

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

#3 2006-11-20 16:15:55

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

#4 2006-11-20 19:40:45

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

#5 2006-12-29 21:06:18

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

#6 2007-05-09 14:43:48

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

#7 2007-06-07 13:05:13

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

#8 2007-06-11 21:23:03

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

rajesh0363 wrote:

#9 2007-06-12 19:36:04

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

#10 2007-07-08 10:29:31

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

#11 2007-07-13 11:27:26

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

#12 2007-07-18 06:21:47

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

20dreamer wrote:

#13 2007-08-04 13:19:31

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

#14 2007-08-15 10:54:38

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

wowo wrote:

rajesh0363 wrote:

#15 2007-09-26 11:22:47

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

#16 2008-04-13 14:51:23

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

#17 2008-04-15 22:45:24

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

leomayleomay wrote:

ianare wrote:

#18 2008-06-25 16:01:57

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

#19 2008-06-25 16:08:59

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

#20 2008-09-20 16:32:38

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

Board footer