[rails5]form_with上で画像を選択し、その画像に指定した数字をデータベース上に保存したい。

Question

いつもお世話になっております
【環境】
Rails5.2.4.2
Ruby 2.5.1
MySQL 5.7

【やりたいこと】
モーダルフォーム上のform_withのデザインをこだわりたいです。
フォーム上で画像を選択し、submitボタンで送信したら、その画像に紐づけられている数字をデータベースに保存したいです。

具体的には、、

上記の画像のようなデザインにしたいです。
（＊これはデザインのために作成したphotoshopの画像です。実際にweb上でこのようには映りません。＊）

赤いつぼは 　status→1
黄色いつぼは status→2
青いつぼは 　status→3
を設定し、アップデートボタンを押せばstatusカラムをupdateしたいと考えています。

【現状】
現状は、、

動作確認のためにf.selectを使用しています。
1~3の数字を選択し、Update Flavorを押せば、ちゃんとstatusカラムがアップデートされることを確認済みです。

【わからないこと】
画像をボタンにすることです。今回は赤、黄色、青のツボをボタンにする方法です。最悪ラジオボタンを使用するのでもいいのですが、なぜかこれがうまくいきません。
さらに、その画像を選択し、送信すれば紐づいた数字をデータベースにアップデートする方法がわかりません。

【ソースコード】
MySQLより今回扱うFlavorモデルの詳細

mysql> show columns from flavors;
+----------------+--------------+------+-----+---------+----------------+
| Field          | Type         | Null | Key | Default | Extra          |
+----------------+--------------+------+-----+---------+----------------+
| id             | bigint(20)   | NO   | PRI | NULL    | auto_increment |
| name           | varchar(255) | YES  |     | NULL    |                |
| purchase_price | int(11)      | YES  |     | NULL    |                |
| status         | int(11)      | YES  |     | NULL    |                |
| image          | text         | YES  |     | NULL    |                |
| created_at     | datetime     | NO   |     | NULL    |                |
| updated_at     | datetime     | NO   |     | NULL    |                |
| user_id        | int(11)      | YES  |     | NULL    |                |
+----------------+--------------+------+-----+---------+----------------+
8 rows in set (0.01 sec)

_form.html.erb

<div class="modal__bg js-modal-close">
   <div class="modal__content">
      <%= form_with(model: @flavor, local: true) do |form| %>
      <div class="modal-header">
        <h5 class="modal-title">ステータスを変更</h5>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
         </button>
      </div>
      <div class="modal-body">
            #ここを画像を使用して希望のデザインを実装したい。
            <div class="form-group field">
               <%= form.select :status, [1,2,3]%>
            </div>
      </div>
         <div class="modal-footer actions">
            <%= form.submit class: "btn btn-danger" %>
            <%= link_to "購入", new_flavor_path, class:"btn btn-primary" %>
         </div>
         <% end %>
   </div>
</div>

flavors_controller.rb

def edit
        @flavor = Flavor.find(params[:id])
        render 'edit.js.erb'
    end
    def update
        @flavor = Flavor.find(params[:id])
        @flavor.update(flavor_params)
        @flavors = Flavor.all.order(id: "ASC").page(params[:page]).per(10)
        redirect_to flavors_path
    end
    
    private
    def flavor_params
    	params.require(:flavor).permit(:name, :purchase_price, :image, :image_cache, :status).merge(user_id: current_user.id) 
    end

解決のため別のファイルを見たい場合はご指摘いただければ公開致します。
ぜひお力添えのほどよろしくお願い致します。

Answer 1

button_tag type: 'button',class: "red_button" do
  赤いボタン表示
end

でいけるかと