Iacutone.rb

coding and things

Carrierwave Gem, Part 1

| Comments

I have been developing a CMS for students at the Flatiron School. Some gems I used for the first time include Sidekiq, Amazon S3, Carrierwave and Fog. This blog post is a walkthrough of how to implement these gems in your own Rails app. Furthermore, h/t to Ryan Bates of Railscasts for the invaluable information in his videos. This blog post will be broken down into different parts, implementing Carrierwave is the objective of this post.

The first step is to initiate the Carrierwave Gem in order to upload pictures to the app. So, the typical steps:

Add 'carrierwave' to your Gemfile

<div class='bogus-wrapper'><notextile><figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>


$ rails g uploader avatar

1

$ rails g migration add_avatar_to_profiles avatar:string

1

$ rake db:migrate

Now, our Profile table has an avatar attribute. An uploader folder was also added to your app route directory named after your attribute name, in this case avatar_uploader.rb. Here is the code in the file.

avatar_uploader.rb 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

# encoding: utf-8

class AvatarUploader < CarrierWave::Uploader::Base
  # include CarrierWaveDirect::Uploader

  # Include RMagick or MiniMagick support:
  include CarrierWave::RMagick
  # include CarrierWave::MiniMagick

  # Include the Sprockets helpers for Rails 3.1+ asset pipeline compatibility:
  # include Sprockets::Helpers::RailsHelper
  # include Sprockets::Helpers::IsolatedHelper

  # Choose what kind of storage to use for this uploader:
  storage :file
  # storage :fog

  # include CarrierWave::MimeTypes
  # process :set_content_type

  # Override the directory where uploaded files will be stored.
  # This is a sensible default for uploaders that are meant to be mounted:
  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end

  # Provide a default URL as a default if there hasn't been a file uploaded:
  # def default_url
  #   # For Rails 3.1+ asset pipeline compatibility:
  #   # asset_path("fallback/" + [version_name, "default.png"].compact.join('_'))
  #
  #   "/images/fallback/" + [version_name, "default.png"].compact.join('_')
  # end

  # Process files as they are uploaded:
  # process :scale => [200, 300]
  #
  # def scale(width, height)
  #   # do something
  # end

  # Create different versions of your uploaded files:
  version :thumb do
    process :resize_to_limit => [150, 150]
  end

  version :profile do
    process :resize_to_limit => [350, 350]
  end

  # Add a white list of extensions which are allowed to be uploaded.
  # For images you might use something like this:
  # def extension_white_list
  #   %w(jpg jpeg gif png)
  # end

  # Override the filename of the uploaded files:
  # Avoid using model.id or version_name here, see uploader/store.rb for details.
  # def filename
  #   "something.jpg" if original_filename
  # end

end

There is a lot of code in here commented out which will be used in later posts for using both Fog and Amazon S3. I like being able to create different sizes under the version sections, for example

<div class='bogus-wrapper'><notextile><figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>

2 3 4 

 version :thumb do
    process :resize_to_limit => [150, 150]
  end

to add elegant versatility to the sizes of your images.

In your Profile model add:

    <div class='bogus-wrapper'><notextile><figure class='code'><figcaption><span>profile.rb </span></figcaption>

1
2

     mount_uploader :avatar, AvatarUploader

To display the avatar in your View:

    <div class='bogus-wrapper'><notextile><figure class='code'><figcaption><span>show.html.erb </span></figcaption>

1
2

     <%= image_tag image_url(:thumb) %>

In your form:

    <div class='bogus-wrapper'><notextile><figure class='code'><figcaption><span>new.html.erb </span></figcaption>

1
2

     <%= f.file_field :avatar %>

That is all, you can now add images of specific sizes to your Rails app!

Carrierwave Railscast
Uploading to Amazon S3 Railscast
Sidekiq Railscast

Comments