File Uploading with ActiveStorage

Talk Outline
-----------------
Why Active Storage?
How to build a simple rails app to upload image.
Uploading with S3 (External Service).
How to test ?
Performance & Security Considerations
Beyond the Basic
Summary

Transcript

1. File Uploading with ActiveStorage
4. Replacement for Paperclip, Carrierwave Extracted from Basecamp Has support for AWS, Azure and Google Cloud Create variants of images on the fly Extract Previews for images and other files
6. Step 1 rails active_storage:install posts active_storage_attachments active_storage_blobs Id title content 1 Shiny Post Shiny Id name record_type record_id blob_id 1 image Post 1 1 Id key filename content_type metadata 1 vR7NJh38y4 image1.JPG image/png {..... Step 2 rails db:migrate
7. Step 3 app/models/post.rb class Post < ApplicationRecord has_one_attached :image end Step 4 app/controllers/posts_controller.rb def post_params params.require(:post).permit(:title,:content,:image) end
8. Step 5app/views/posts/_form.html.erb <div class="field"> <%= form.label :image %> <%= form.file_field :image %> </div> Step 6 app/views/posts/show.html.erb <% if @post.image.attached? %> <p> <strong>Image:</strong> <br> <%= image_tag @post.image %> </p> <% end %>
10. Step 1Gemfile gem 'aws-sdk-s3', '~>1' Step 2 config/environments/development.rb config.active_storage.service = :amazon Step 3 config/storage.yml amazon: service: S3 access_key_id: <%= Rails.application.credentials.dig(:aws, :access_key_id) %> secret_access_key: <%= Rails.application.credentials.dig(:aws, :secret_access_key) %> region: us-east-1 bucket: active-storage-hhemanth
11. Step 4EDITOR="subl --wait" bin/rails credentials:edit aws: access_key_id: 123 secret_access_key: 345 # Used as the base secret for all MessageVerifiers in Rails, including the one protecting cookies. secret_key_base: 81b8cf7fb4c6a0afc08a20aee3090ebccd8f5ed69859ebdc09dc3b4d8cc7fe98c2b62ea8d4cbee369b45be560f1c59335cfdc4b 84b1a498d6bd08f375d9e528e
13. Console 2.5.1 :001 > pimg = Post.first.image 2.5.1 :008 > pimg.attach(io: File.open('/Users/hhemanth/Documents/pics/image1.JPEG'), filename: 'img1.JPEG') 2.5.1 :014 > pimg.purge_later 2.5.1 :011 > pimg.purge
15. Step 1config/environments/test.rb Rails.application.configure do config.active_storage.service = :test end Step 2 spec/controllers/posts_controller_spec.rb describe 'POST #create' do it 'attaches the uploaded file' do file = fixture_file_upload(Rails.root.join('public', 'apple-touch-icon.png'), 'image/png') expect { post :create, params: { post: { image: file } } }.to change(ActiveStorage::Attachment, :count).by(1) end end
17. Displaying an image -> 3 DB queries Can lead to N+1 queries × Active Storage generates a scope with_attached_image (or with_attached_your_attachment_name) @posts = Post.with_attached_image × Eager Loading app/models/post.rb class Post < ApplicationRecord scope :with_eager_loaded_image , -> { eager_load(image_attachment: :blob ) } scope :with_preloaded_image , -> { preload(image_attachment: :blob ) } end
19. × Mirroring × Multiple file attachments × Attaching File I/O objects (.attach) × Removing Files (.purge) × Download Files (.download) × Transforming Images - image_processing gem (. variant(resize_to_fit: [100, 100])) × Previewing files (.preview(resize_to_limit: [100, 100])) × Direct Uploads × Support for other Cloud services (ActiveStorage::Service ) × Cannot cache on cloudfront
20. × Active_storage can be used to upload files to your app. × Alternative to paperclip gem. × Has support for AWS, Azure and Google Cloud. Support for other can be added. × Can run into performance issues (N+1) queries, but has support to handle it. × Can be tested with rspec. × Integrates with Imagemagick.