File upload with Carrierwave

File upload with Carrierwave in Rails

Share with 桃園 Ruby on Rails 讀書會

Presentation created by Yusheng Li
Demo Project created by Bihan Zhang

Transcript

1. File upload with CarrierWave Yu-Sheng Li, April 10th, 2015 1
2. Before getting started Clone demo project from GitHub # Switch to directory you want to work in. cd /tmp # Clone Demo Project from GitHub git clone git@github.com:mitour/railsdemo.git # Switch to Project Directory cd railsdemo # Delete .git directory rm -rf .git # Run the following command: bundle install rake db:migrate Yu-Sheng Li, April 10th, 2015 2
3. Start using CarrierWave1 # In Rails, add it to your Gemfile: gem 'carrierwave' # In terminal, switch to your project directory, and run: bundle install 1 For more details on this gem, please refer to official GitHub page Yu-Sheng Li, April 10th, 2015 3
4. Generate migration (Optional Steps) # Generate a migration # Add a column to existing column rails g migration AddPictureToPosts image:string Yu-Sheng Li, April 10th, 2015 4
5. Generate Uploader # In your project directory, # Run the following command to generate uploader rails g uploader Picture Yu-Sheng Li, April 10th, 2015 5
6. Mount uploader # Open corresponding model file, # and mount the uploader: mount_uploader :image, PictureUploader Yu-Sheng Li, April 10th, 2015 6
7. File input # Add file input code in corresponding form <%= f.input :image, as: :file %> Yu-Sheng Li, April 10th, 2015 7
8. Display results <!-- Add a table column --> <td>
   </td> <!-- Display image using image_tag helper --> <td><%= image_tag product.image %></td> Yu-Sheng Li, April 10th, 2015 8
9. Strong Parameter # Modify corresponding controller to pass-through def post_params params.require(:post).permit(:title, :content, :publish_date, :user_id, :image) end Yu-Sheng Li, April 10th, 2015 9
10. Processing Image Include MiniMagicK We're going to use MiniMagicK2 to help us process image # Uncomment the following code in corresponding uploader include CarrierWave::MiniMagick 2 MiniMagicK is recommended on the Official guide. RmagicK is reported that it eats up huge amounts of memory, and may cause memory leak, so in order to make sure everything works fine on a remote server, we're going to use MinimagicK instead. Yu-Sheng Li, April 10th, 2015 10
11. Processing Image Install ImageMagicK In order to use MiniMagicK, you need to install Imagemagick on your computer3 # For OSX: brew install imagemagick # For Ubuntu apt-get install imagemagick # For CentOS yum install imagemagick 3 You must have Imagemagick and MiniMagick installed to do image resizing. MiniMagick is a Ruby interface for Imagemagick which is a C program. This is why MiniMagick fails on 'bundle install' without Imagemagick installed. Yu-Sheng Li, April 10th, 2015 11
12. Processing Image Add Gem: mini_magick # In Rails, add it to your Gemfile: gem "mini_magick" Yu-Sheng Li, April 10th, 2015 12
13. Processing Image Set Image Version4 # Uncomment & edit the following lines version :thumb do process :resize_to_fill => [150, 150] end version :medium do process :resize_to_fill => [350, 350] end 4 See more details on RubyDoc Yu-Sheng Li, April 10th, 2015 13
14. Processing Image Create versions for existing images # Run the following block of codes in Rails Console Post.find_each do |post| unless post.picture.thumb.file? || !post.picture? post.picture.recreate_versions!(:thumb) end Yu-Sheng Li, April 10th, 2015 14
15. Display a specific version image <!-- Display image using image_tag helper --> <td><%= image_tag product.image.thumb %></td> Yu-Sheng Li, April 10th, 2015 15
16. Upload to third-party Use google cloud storage5 as an example # We're going to use gem: fog # In Rails, add it to your Gemfile: gem "fog" # Optimized Loading of Fog gem "fog", require: "fog/google/storage" 5 Sign up at Google Cloud Platform, and request an API from Google APIs Console Yu-Sheng Li, April 10th, 2015 16
17. Build configuration file # Paste below code in config/initializers/carrierwave.rb CarrierWave.configure do |config| config.fog_credentials = { provider: 'Google', google_storage_access_key_id: 'xxxxxx', google_storage_secret_access_key: 'yyyyyy' } config.fog_directory = 'name_of_directory' end Yu-Sheng Li, April 10th, 2015 17
18. Set storage to :fog # In app/uploaders/picture_uploader.rb class AvatarUploader < CarrierWave::Uploader::Base storage :fog end Yu-Sheng Li, April 10th, 2015 18