Feature: Use AWS for File Storage

Gemfile

@@ -42,7 +42,7 @@ gem 'tzinfo-data', platforms: %i[windows jruby]
 gem 'bootsnap', require: false
 
 # Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
-# gem "image_processing", "~> 1.2"
+gem 'image_processing', '~> 1.2'
 
 group :development, :test do
   # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
@@ -72,4 +72,5 @@ gem 'rubocop', '>= 1.0', '< 2.0'
 
 gem 'devise', '~> 4.9'
 
+gem 'aws-sdk-s3', require: false
 gem 'cancancan'

Gemfile.lock

@@ -78,6 +78,22 @@ GEM
     addressable (2.8.5)
       public_suffix (>= 2.0.2, < 6.0)
     ast (2.4.2)
+    aws-eventstream (1.3.0)
+    aws-partitions (1.888.0)
+    aws-sdk-core (3.191.1)
+      aws-eventstream (~> 1, >= 1.3.0)
+      aws-partitions (~> 1, >= 1.651.0)
+      aws-sigv4 (~> 1.8)
+      jmespath (~> 1, >= 1.6.1)
+    aws-sdk-kms (1.77.0)
+      aws-sdk-core (~> 3, >= 3.191.0)
+      aws-sigv4 (~> 1.1)
+    aws-sdk-s3 (1.143.0)
+      aws-sdk-core (~> 3, >= 3.191.0)
+      aws-sdk-kms (~> 1)
+      aws-sigv4 (~> 1.8)
+    aws-sigv4 (1.8.0)
+      aws-eventstream (~> 1, >= 1.0.2)
     base64 (0.2.0)
     bcrypt (3.1.20)
     bigdecimal (3.1.4)
@@ -112,10 +128,15 @@ GEM
     drb (2.2.0)
       ruby2_keywords
     erubi (1.12.0)
+    ffi (1.16.3)
+    ffi (1.16.3-x64-mingw-ucrt)
     globalid (1.2.1)
       activesupport (>= 6.1)
     i18n (1.14.1)
       concurrent-ruby (~> 1.0)
+    image_processing (1.12.2)
+      mini_magick (>= 4.9.5, < 5)
+      ruby-vips (>= 2.0.17, < 3)
     importmap-rails (1.2.3)
       actionpack (>= 6.0.0)
       activesupport (>= 6.0.0)
@@ -127,6 +148,7 @@ GEM
     jbuilder (2.11.5)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
+    jmespath (1.6.2)
     json (2.6.3)
     language_server-protocol (3.17.0.3)
     loofah (2.22.0)
@@ -139,6 +161,7 @@ GEM
       net-smtp
     marcel (1.0.2)
     matrix (0.4.2)
+    mini_magick (4.12.0)
     mini_mime (1.1.5)
     minitest (5.20.0)
     msgpack (1.7.2)
@@ -253,6 +276,8 @@ GEM
     rubocop-ast (1.30.0)
       parser (>= 3.2.1.0)
     ruby-progressbar (1.13.0)
+    ruby-vips (2.2.0)
+      ffi (~> 1.12)
     ruby2_keywords (0.0.5)
     rubyzip (2.3.2)
     selenium-webdriver (4.15.0)
@@ -301,11 +326,13 @@ PLATFORMS
   x86_64-linux
 
 DEPENDENCIES
+  aws-sdk-s3
   bootsnap
   cancancan
   capybara
   debug
   devise (~> 4.9)
+  image_processing (~> 1.2)
   importmap-rails
   jbuilder
   pg (~> 1.1)

app/assets/stylesheets/application.css

@@ -111,15 +111,22 @@ input[type='file'] {
   padding: 0.5rem 0 0.5rem 0.5rem;
 }
 
-.add-btn a {
-  border: 1px solid white;
+.inner-btn a {
   color: white;
-  padding: 0.5rem 4.5rem;
 }
 
-@media (min-width: 375px) {
+.inner-btn {
+  border: 1px solid white;
+  padding: 0.3rem;
+  height: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@media (min-width: 280px) {
   .add-btn a {
-    padding: 0.5rem 6.3rem;
+    padding: 0.5rem 1rem;
   }
 }
 

app/assets/stylesheets/categories.css

@@ -22,5 +22,7 @@
 }
 
 .category img {
-  width: 15%;
+  width: 3rem;
+  height: 3rem;
+  object-fit: cover;
 }

app/controllers/categories_controller.rb

@@ -25,6 +25,6 @@ def create
   private
 
   def category_params
-    params.require(:category).permit(:name, :icon)
+    params.require(:category).permit(:name, :image)
   end
 end

app/models/category.rb

@@ -2,6 +2,7 @@ class Category < ApplicationRecord
   belongs_to :author, class_name: 'User'
   has_many :categories_procurements, class_name: 'CategoriesProcurement'
   has_many :procurements, through: :categories_procurements
+  has_one_attached :image
 
   validates :name, presence: true
 end

app/views/categories/index.html.erb

@@ -7,7 +7,7 @@
     <%= link_to category_procurements_path(category) do %>
     <section class="category">
       <section class="category-one">
-          <img src="<%= category.icon %>">
+          <img src="<%= category.image.url %>">
         <div>
           <p><%= category.name %></p>
           <p><%= category.updated_at.strftime("%e %b %Y") %></p>
@@ -25,5 +25,7 @@
   <% end %>
 </section>
 <div class="add-btn btn">
-  <%= link_to 'Add a New Category', new_categories_path %>
+  <div class="inner-btn">
+    <%= link_to 'Add a New Category', new_categories_path %>
+  </div>
 </div>

app/views/categories/new.html.erb

@@ -14,7 +14,7 @@
         <%= f.text_field :name, placeholder: "Name of category"  %>
       </div>
       <div>
-        <%= f.text_field :icon, placeholder: "Photo icon url"  %>
+        <%= f.file_field :image  %>
       </div>
       <div>
         <%= f.submit 'Add category' %>

app/views/procurements/index.html.erb

@@ -34,5 +34,7 @@
   <% end %>
 </section>
 <div class="add-btn btn">
-  <%= link_to 'Add a New Transaction', new_category_procurements_path %>
+  <div class="inner-btn">
+    <%= link_to 'Add a New Transaction', new_category_procurements_path %>
+  </div>
 </div>

config/credentials.yml.enc

@@ -1 +1 @@
-H0SsI7OmNQCy86S6d56vox1bBbSYKMhZA9zhdNA5jN15Hm9cJrsmNejv8CFu9TEr34pzsELOLd5F1rSM6pdH2kc0IqqakrEVEG4XLrBtSGTfoPxyKPRvhDeU1aOQc0XGbKqSQBWQopr1SJnFilf2xBJ4pcqrG5gkCaQK1IXFT0GSbcrQTGUTl0KysFzbFoQUHBLQK1P2mOSWqM1D9M2FaBIarWwaHXK8xrsgEaLAo2IqfwSQa025W+HP2zQWRpm7l5BZY11l63eLzKIMOrroUtMIQ9b3m9qp59r2Uc3Vf/C3Aqnj873tUGcPW1/mP1Drj1oWzqA3C3RWqD+NTWy0Uuft2Izz8z8R7B8QaZmEKKH7CnZ3BwtB5e/sGdND+7YJ7TOlzXrmFUMGtoutbDssR/m9ql2N--oOSi6BXZb3dwRGh3--YwQOEh15mrl2EwT3ka6+5g==
+X26mJH6dP2jgo91XbsGtC0dPFz/6yXnrTPfen9t16xEcofumq7guD+doRLVGcVArMZxsv0MKCzUhBkEtNmCNukAlh6zLwPJIu2aemtV4xHBZshqlb5pN/dmVF9T9+UKg1K3iLyJJrbBlExU53nDHXcDM56fRrbqHUO5KKHJz1jl/ol3rzb3yCnlOrqdCX5TBdDLwPTvno/PLADdhFc+ohBrtTKY8HOxXakxASIRhwl1fkQqFXfavtA25tsMowedh/mYq6dkokVtIMDVhF1jGzO5Op3rZQ3EK9OS6kuwoPmyVjzoQDxyujB8nL9OizCFoQ9munGlb4W832ImYqzr7lsedP37zu+RDHz1a28PuDKGmT9II+a+SBHsOLM3rEf9mBrrqHHawv5bonOj9AvWcES0Q1eaYSZX0NmrooaDXDlqRor+qFdxvwUFSkiyvKPc1V4YEMR0Acme/aozwRhoVD5CoCmDDvtKHLc0tRrLng+Z3l8XT+sqhF1Z/v2TQrIXGU6F+NBCOq89MtwBa/aqKzG3x1Nw1d3ZZKvpqjI95--UImnVO0COc363y/G--CDvuAZLqCGDgQKv2UeaTVQ==

config/environments/development.rb

@@ -34,7 +34,7 @@
   end
 
   # Store uploaded files on the local file system (see config/storage.yml for options).
-  config.active_storage.service = :local
+  config.active_storage.service = :amazon #:local
 
   # Don't care if the mailer can't send.
   config.action_mailer.raise_delivery_errors = false

config/environments/production.rb

@@ -37,7 +37,7 @@
   # config.action_dispatch.x_sendfile_header = "X-Accel-Redirect" # for NGINX
 
   # Store uploaded files on the local file system (see config/storage.yml for options).
-  config.active_storage.service = :local
+  config.active_storage.service = :amazon #:local
 
   # Mount Action Cable outside main process or domain.
   # config.action_cable.mount_path = nil

config/storage.yml

@@ -7,12 +7,13 @@ local:
   root: <%= Rails.root.join("storage") %>
 
 # Use bin/rails credentials:edit to set the AWS secrets (as aws:access_key_id|secret_access_key)
-# 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: your_own_bucket-<%= Rails.env %>
+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: eu-north-1
+  bucket: winnie-first
+  public: true
 
 # Remember not to checkin your GCS keyfile to a repository
 # google: