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.
|
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:
|
1 |
rails g scaffold 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:
|
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:
|
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):
|
1 |
<%= image_tag current_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.
|
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:
|
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:
|
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.
Koren Leslie Cohen
Latest posts by Koren Leslie Cohen (see all)
- How to Transition into Product Management - December 26, 2017
- What I’ve Learned in My First Few Months as a Product Manager - October 14, 2015
- Front End Engineer Interview Questions - July 20, 2015
Donald says
April 27, 2015 at 8:14 pmHi Koren,
Thank you for the tutorial on amazon s3 and paperclip, it was helpful in conjunction with a tutorial form muno at http://www.munocreative.com/nerd-notes/justpayme.
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 :).
Koren Leslie Cohen says
April 27, 2015 at 8:16 pmThanks so much, Donald! 😉
Ollaollu says
August 21, 2015 at 3:29 pmGreat stuff and very helpful! Thanks Koren
Koren Leslie Cohen says
August 21, 2015 at 3:54 pmAwesome 🙂
Irfan says
September 15, 2015 at 1:38 pmReally helpful for understanding the general theme of how it works. It would be nice to have a github link to the source, really handy for the beginners!
Koren Leslie Cohen says
September 15, 2015 at 1:44 pmhttps://github.com/KorenLeslieCohen/consign
Irfan says
September 15, 2015 at 2:56 pmThank you, that’s a great help 🙂
Randall says
October 2, 2015 at 1:45 pmHi 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!
Koren Leslie Cohen says
October 13, 2015 at 9:22 pmThanks, Randall!
Kert says
May 10, 2016 at 9:51 amThis “free sharing” of infrimatoon seems too good to be true. Like communism.
Queenie says
August 13, 2016 at 6:38 amThat’s a posting full of inhgsit!
Peter says
December 3, 2015 at 2:41 pmThis was really helpful. You rock, Koren!
Koren Leslie Cohen says
December 3, 2015 at 2:57 pmRight on 😉
Adrian says
November 18, 2016 at 3:39 amGreat blog post! This was specific and helpful! I didn’t know I had to create the aws.yml myself!