Rails中file_field标签选中文件后不显示文件名如何解决？

• 绝大多数情况是前端引入了自定义美化的文件上传样式，原生<input type="file">控件被CSS设置为透明、隐藏或者移出可视区域，但是没有配套编写JavaScript监听文件选择事件，将选中的文件名同步到自定义的显示位置。Bootstrap、Tailwind UI等主流前端框架的自定义文件上传组件都需要配套该逻辑才能正常显示文件名。
• 极少数情况是页面存在CSS冲突，导致原生文件控件的文件名显示区域被遮挡、宽度被设为0，无法正常渲染内容。

方案1：配套自定义样式添加文件名同步逻辑 #

首先给file_field添加唯一ID，方便JS定位，示例代码：

<%# 表单部分代码 %>
<%= form_with model: @your_model, multipart: true do |f| %>
  <div class="file-upload-wrap">
    <%= f.label :import_csv, "上传CSV文件", class: "upload-btn" %>
    <%= f.file_field :import_csv, id: "csv_upload_input" %>
    <span id="selected_file_name">未选择任何文件</span>
  </div>
<% end %>

然后添加JS监听文件选择事件，同步文件名到显示区域：

document.addEventListener('DOMContentLoaded', function() {
  const fileInput = document.getElementById('csv_upload_input');
  const nameDisplay = document.getElementById('selected_file_name');
  
  fileInput.addEventListener('change', function() {
    if (this.files.length > 0) {
      nameDisplay.textContent = this.files[0].name;
    } else {
      nameDisplay.textContent = '未选择任何文件';
    }
  });
});

额外提示：form标签必须添加multipart: true参数，否则Rails后端无法正常接收上传的文件

方案2：使用原生文件控件 #

如果你不需要自定义上传样式，直接排查全局CSS中针对input[type="file"]的样式规则，删除opacity: 0、display: none、visibility: hidden、负边距移出可视区域等相关配置，原生控件默认就会在选中文件后自动展示文件名。

内容的提问来源于stack exchange，提问作者Tejas Zambre