Skip to content

Latest commit

 

History

History
155 lines (102 loc) · 6.33 KB

image-upload.md

File metadata and controls

155 lines (102 loc) · 6.33 KB

Upload an Image on Rails

Resources

Local Uploading with Paperclip

  1. Install imagemagick on your computer.
$ brew install imagemagick
  1. Add paperclip to your Gemfile.
gem 'paperclip'
  1. Add paperclip code to your User model.
class User < ActiveRecord::Base
  has_attached_file :avatar, styles: { medium: "300x300>", thumb: "100x100>" }

  validates_attachment_content_type :avatar, content_type: /\Aimage\/.*\Z/
end

The :styles attribute creates various styles of images, which will be accessible later with paperclip url helpers:

  <%= image_tag @user.avatar.url %>
  <%= image_tag @user.avatar.url(:medium) %>
  <%= image_tag @user.avatar.url(:thumb) %>
  1. Create a migration $ rails g paperclip user avatar
class AddAttachmentAvatarToUsers < ActiveRecord::Migration
  def up
    add_attachment :users, :avatar
  end

  def down
    remove_attachment :users, :avatar
  end
end

  1. rake db:migrate

  2. Add a file field to your users#new form.

<%= f.file_field :avatar %>

Remember to add :avatar to user_params

Remote Image Hosting with Paperclip and AWS S3

This solution works locally, but in order to save images in the cloud you'll need to set up an Amazon S3 bucket. S3 will require some secret keys, so you'll also set up a way to use environment variables to store those secret keys.

Never EVER check a secret key into git

If your key has already been checked in, even if you didn't push; go and revoke that key immediately. Hackers can easily scan even OLD commits for keys in minutes.

HACKERS CAN CHARGE THOUSANDS OF DOLLARS TO YOUR AMAZON WEB SERVICES ACCOUNT IN JUST A FEW DAYS!

Hiding Secrets Option 1: environment variables

Carefully follow the instructions in our how to hide secret keys guide.

Hiding Secrets Option 2: dotenv gem

  1. You will use a .env file to store secret environment varaibles. Immediately, BEFORE YOU CREATE ANY NEW FILES, add a line that says .env to your .gitignore, then add and commit this .gitignore change.

  2. For environment variables, add the dotenv gem to your Gemfile before paperclip. Then add a .env file to the root directory of your project.

  3. Sign into an Amazon Web Services (AWS) account and select S3. Create a new bucket. Generate a new API key, and copy both the API key id and the secret key into the .env file. PROTECT THIS API KEY -- DO NOT COMMIT TO GITHUB!!

Using Secret Keys for Paperclip

  1. Add your AWS_BUCKET, AWS_PUBLIC_KEY, and AWS_SECRET your secrets file - this will be the .env file if you are using the dotenv gem or the secrets.sh file if you are manually managing your secret keys.
S3_BUCKET_NAME="your bucket name here"
AWS_ACCESS_KEY_ID="super secret shhhhh"
AWS_SECRET_ACCESS_KEY="do not push me to github"

Remember to add your secret key file to your .gitignore! Seriously.

  1. Add the aws-sdk gem to your Gemfile. Don't forget to bundle.
gem 'aws-sdk'
  1. In your config/environments/development.rb and config/environments/production.rb, add the following configuration for paperclip:
# Configure paperclip for uploading photos to AWS S3 bucket
config.paperclip_defaults = {
  :storage => :s3,
  :bucket => ENV['S3_BUCKET_NAME'],
  :url => ":s3_domain_url",
  :path => "/:class/:attachment/:id_partition/:style/:filename",
  :s3_credentials => {
    access_key_id: ENV['AWS_ACCESS_KEY_ID'],
    secret_access_key: ENV['AWS_SECRET_ACCESS_KEY'],
    s3_region: nil
  }
}

  1. Now it should work locally! Upload a file to see it added to your bucket.

  2. Push your changes to GitHub, and check your repository on GitHub. Make sure your secrets file is not in the repository.

  3. If your secret key file was accidentally checked into GitHub, FOLLOW THESE STEPS IMMEDIATELY:

  • Deactivate and delete the current AWS keys according to Amazon's instructions.
  • Remove the secrets file from your GitHub tracking: git rm .env or git rm secrets.sh.
  • Do a git commit to delete the file from git, and push to carry that change up to GitHub. Make sure every collaborator pulls down this change.
  • Only after you're sure your secret environment variable file is not on GitHub, generate new AWS keys according to Amazon's instructions, and add them to your secrets file. Find a secure, off-GitHub way to get your keys to each collaborator.

Copy Environment Variables to Heroku

  1. To get this going on heroku, you need to configure environment variables on heroku's server. Use heroku config:set to set the S3_BUCKET_NAME, AWS_ACCESS_KEY_ID, and AWS_SECRET_ACCESS_KEY on your heroku server. (Copy these values from your .env file.)

  2. Push your changes to heroku, and upload a file live!

Troubleshooting

Image still not loading? Here are some things to check:

  • Is your image uploading? Check in the bucket.
  • Are you getting an "Access Denied" error? Check that your AWS credentials are correct in your secrets file. Delete your old secret key and generate a new one, if you think you miscopied or mistyped.
  • Are you getting other bogus stuff!?