Image uploading feature was added

Author: MaksimBiletsky

Gemfile

@@ -38,3 +38,5 @@ end
 
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
 gem "tzinfo-data", platforms: [:mingw, :mswin, :x64_mingw, :jruby]
+
+gem "active_model_serializers"

Gemfile.lock

@@ -39,6 +39,11 @@ GEM
       erubi (~> 1.4)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.1, >= 1.2.0)
+    active_model_serializers (0.10.13)
+      actionpack (>= 4.1, < 7.1)
+      activemodel (>= 4.1, < 7.1)
+      case_transform (>= 0.2)
+      jsonapi-renderer (>= 0.1.1.beta1, < 0.3)
     activejob (6.1.4.4)
       activesupport (= 6.1.4.4)
       globalid (>= 0.3.6)
@@ -80,6 +85,8 @@ GEM
       rack-test (>= 0.6.3)
       regexp_parser (>= 1.5, < 3.0)
       xpath (~> 3.2)
+    case_transform (0.2)
+      activesupport
     childprocess (4.1.0)
     concurrent-ruby (1.1.9)
     connection_pool (2.2.5)
@@ -98,6 +105,7 @@ GEM
     jbuilder (2.11.5)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
+    jsonapi-renderer (0.2.2)
     launchy (2.5.0)
       addressable (~> 2.7)
     letter_opener (1.7.0)
@@ -246,6 +254,7 @@ PLATFORMS
   x86-mswin32
 
 DEPENDENCIES
+  active_model_serializers
   bootsnap (>= 1.4.4)
   byebug
   capybara (>= 3.26)

app/controllers/home_controller.rb

@@ -4,11 +4,15 @@ class HomeController < ApplicationController
   before_action :set_todo_item, only: [:edit_todo_item]
 
   def landing
-    @todos = Todo.all.order(:id)
+    @todos = Todo.all.order(:id).map { |record| TodoSerializer.new(record) }
   end
 
   def edit_todo_item
-    @todo_item.update(todo_item_params)
+    if todo_item_params[:image]
+      @todo_item.image.attach(todo_item_params[:image])
+    end
+    @todo_item.update(todo_item_params.except(:image))
+
     render json: @todo_item
   end
 
@@ -19,7 +23,7 @@ def reset_todo_items
   private
 
   def todo_item_params
-    params.require(:home).permit(:id, :title, :checked)
+    params.require(:home).permit(:id, :title, :checked, :image)
   end
 
   def set_todo_item

app/javascript/components/TodoList/index.tsx

@@ -7,6 +7,7 @@ type TodoItem = {
   id: number;
   title: string;
   checked: boolean;
+  image: string;
 };
 
 type Props = {
@@ -31,11 +32,31 @@ const TodoList: React.FC<Props> = ({ todoItems }) => {
         checked: e.target.checked,
       }
     }).then((res) => {
+      let foundIndex = todoItems.findIndex(todo => todo.id == res.data.id);
+      todoItems[foundIndex] = res.data.id;
       e.target.checked = res.data.checked;
  });
 
   };
 
+  const onImageChange = (event, id) => {
+    const data = new FormData();
+    data.append("home[image]", event.target.files[0]);
+    data.append("home[id]", `${id}`);
+
+    axios.post('todo/', data, {
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }})
+      .then((res) => {
+        let foundIndex = todoItems.findIndex(x => x.id == res.data.id);
+        todoItems[foundIndex] = res.data.id;
+
+        const image = document.getElementById(`img_${res.data.id}`) as HTMLImageElement | null;
+        image.src = res.data.image;
+      });
+  };
+
   const resetButtonOnClick = (): void => {
     axios.post("/reset").then(() => location.reload());
   };
@@ -52,6 +73,11 @@ const TodoList: React.FC<Props> = ({ todoItems }) => {
               checked={todo.checked}
               onChange={(e) => checkBoxOnCheck(e, todo.id)}
             />
+
+            <img id={`img_${todo.id}`} 
+                 src={todo.image}
+                 style={{maxHeight: '100px', maxWidth: '100px'}}/>
+            <Form.Control type="file" accept="image/*" multiple={false} onChange={(e) => onImageChange(e, todo.id)} />
           </ListGroup.Item>
         ))}
         <ResetButton onClick={resetButtonOnClick}>Reset</ResetButton>

app/models/todo.rb

@@ -1,2 +1,3 @@
 class Todo < ApplicationRecord
+  has_one_attached :image
 end

app/serializers/todo_serializer.rb

@@ -0,0 +1,8 @@
+class TodoSerializer < ActiveModel::Serializer
+  include Rails.application.routes.url_helpers
+  attributes :id, :title, :checked, :image
+
+  def image
+    rails_blob_path(object.image, only_path: true) if object.image.attached?
+  end
+end

db/migrate/20220908121707_create_active_storage_tables.active_storage.rb

@@ -0,0 +1,36 @@
+# This migration comes from active_storage (originally 20170806125915)
+class CreateActiveStorageTables < ActiveRecord::Migration[5.2]
+  def change
+    create_table :active_storage_blobs do |t|
+      t.string   :key,          null: false
+      t.string   :filename,     null: false
+      t.string   :content_type
+      t.text     :metadata
+      t.string   :service_name, null: false
+      t.bigint   :byte_size,    null: false
+      t.string   :checksum,     null: false
+      t.datetime :created_at,   null: false
+
+      t.index [ :key ], unique: true
+    end
+
+    create_table :active_storage_attachments do |t|
+      t.string     :name,     null: false
+      t.references :record,   null: false, polymorphic: true, index: false
+      t.references :blob,     null: false
+
+      t.datetime :created_at, null: false
+
+      t.index [ :record_type, :record_id, :name, :blob_id ], name: "index_active_storage_attachments_uniqueness", unique: true
+      t.foreign_key :active_storage_blobs, column: :blob_id
+    end
+
+    create_table :active_storage_variant_records do |t|
+      t.belongs_to :blob, null: false, index: false
+      t.string :variation_digest, null: false
+
+      t.index %i[ blob_id variation_digest ], name: "index_active_storage_variant_records_uniqueness", unique: true
+      t.foreign_key :active_storage_blobs, column: :blob_id
+    end
+  end
+end