Rails: Uploading Photos via Amazon S3 and Paperclip

There are many ways to upload photos to a Rails application, and quite a few resources on the web. This is what worked for me.

Gemfile

You want to include the AWS and Paperclip gems in your
Gemfile.

Gemfile

1

2

3

4

5

# Amazon web services

gem'aws-sdk'

# Images

gem'paperclip'

Create a Photos Controller

You can scaffold your photos, or create an individual controllers, models and views, depending on the needs of your application. When you create your migration, you want to use
attachment, so your migration may look something like:

Photo

1

railsgscaffold Photo attachment:photo description:text

Your controller should function like any other controller in your application.

Photo Model

In addition to what would normally be included in your model, you should include your AWS settings, as follows:

Photo Model

1

has_attached_file:photo

Set up Amazon S3

Amazon S3 has decent documentation, and you should be able to follow the guidelines for setting up an Amazon S3 account. Make sure you get your API Key and Secret Access Key, as you will need those to include in your Rails application.

You will also need to create a bucket for your photos to be sent, and make sure the photos in that bucket are set to public, so you can render them in your views.

Views

Wherever you choose to upload your photo, this is how to add the “choose file” button to your form:

Image Upload

1

<%=f.file_field:photo,placeholder:"Upload Photo"%>

You should be able to render the images later by calling the photo method (or whatever you called this attribute in your migration):

Photo View

1

<%=image_tagcurrent_user.photo%>

AWS File

Create an
aws.yml file in your
config directory. In this file, include your AWS API keys for development. Make sure you include this file in your
.gitignore file, or you risk pushing your API keys to GitHub.

aws.yml

1

2

3

development:

access_key_id:

secret_access_key:

Configure Your Environments

In your
config/environments directory, you should have
production.rb and
development.rb files. In each file, include the configuration for S3. In development, your API keys will be located in
aws.yml, but in production, they will be included as environment variables which will be input into Heroku (or whoever is hosting your application).

Your development environment should include:

AWS S3

1

2

3

4

5

6

7

8

# Amazon Web Services - S3

config.paperclip_defaults={

:storage=>:s3,

:s3_credentials=>{

:bucket=>'consignnyc',

:s3_credentials=>"#{Rails.root}/config/aws.yml",

}

}

Your production environment should include:

AWS S3

1

2

3

4

5

6

7

8

9

# Amazon Web Services S3

config.paperclip_defaults={

:storage=>:s3,

:s3_credentials=>{

:bucket=>'consignnyc',

:access_key_id=>ENV['AWS_ACCESS_KEY'],

:secret_access_key=>ENV['AWS_SECRET_ACCESS_KEY']

}

}

Manipulating Images

You will probably also want to download Imagemagick and use the mini_magick gem to manipulate photos. You probably also want to add validations regarding photo size.

I can’t help but be at awe about your accomplishments. Truthfully, I noticed the profile picture and thought “Woah, this tutorial is by a beautiful blonde who’s a Full Stack Developer” and then I saw the “Attorney,” which prompted a click on the resume.

A very impressive resume, I wanted to reach out and say thanks for that, it definitely isn’t everyday where I come across women (online/offline) that are EngineerxAttorneys.

Anyhow, thanks for the tutorial it was short and sweet and looked nice, which stopped me from skimming it :).

Hi Koren! I found your blog from a google search again. Just wanted to let you (and your readers) know that I had some trouble with Paperclip/AWS v2, so I had to specify gem ‘aws-sdk’, ‘~> 1.6’ in my gem file. Thanks!