経緯

独学サイトでファイルをアップロードする際にfile_fieldにファイルを選択していない状態でアップロードボタンを押すとエラーになりました。
そもそも、ファイルが選択されてない状態であればボタンを押せなくればいいのでは、と思考。

環境

Ruby 2.3.0
Rails 5.0.4

施策

1). views/hogehoge/_formにJavaScriptを効かせる施策をする。

views/hogehoge/_form.html.erb

<%= form_for(hogehoge) do |f| %>
  <div>
    <%= f.label :file %>
    <%= f.file_field :file, id: 'elmFile', onchange: 'selectFile()' %>
  </div>

  <div>
    <%= f.submit 'アップロード', id: 'btnUPload', disabled: true %>
  </div>
<% end %>

2). assets/javascripts/hogehoge.jsでファイルが選択されたらボタンを有効になるように記述

assets/javascripts/hogehoge.js

function selectFile() {
    if (document.getElementById("elmFile").value === ""){
        document.getElementById("btnUpload").disabled = true;
    }
    else {
        document.getElementById("btnUpload").disabled = false;
    }
}

参考サイト

[input type="file"でファイルが選択されたらアップロードボタンを有効化する](input type="file"でファイルが選択されたらアップロードボタンを有効化する)