点击编辑按钮后，上传的文件未显示在rails表格上

Question

单击编辑按钮后，编辑表单上未显示上一个上载的文件/图像，只显示未选择文件，但文件已存储到数据库中。这是我的haml表格，如下所示。

.....
.....

.field
  = f.label "address_proof"
  = f.file_field :address_proof, :required => true, :class =>'form- control', placeholder: "upload address proof"
.field
  = f.label "identity_proof"
  = f.file_field :identity_proof, :required => true, :class =>'form-control', placeholder: "upload identity proof" 
 %br.actions
  = f.submit 'submit', :class=>"btn waves-effect waves-light", :id=>"validate"
  = link_to 'Cancel', admin_members_path, :class=>"btn white grey-text waves-effect waves-red"

Answer 1

转换为<input type="file" />标记的文件字段只能用于接受来自用户的文件。它无法显示有关应用程序文件存储中存在的文件的任何信息。

您可以做的是在输入旁边显示已附加文件的信息，可能在标签中。我的HAML非常生疏，所以这是一个使用ERB的例子，并假设你使用ActiveStorage：

<div class="form-group">
  <%= f.label :identity_proof do %>
    <% if f.object.identity_proof.attached? %>
      The currently attached file is <%= f.object.identity_proof.filename %>. Click here to replace this file.
    <% else %>
      No file has been uploaded yet. Please pick a file.
    <% end %>
  <% end %>

  <%= f.file_field :identity_proof %>
</div>

但是，这仍然会留下输入标记本身，表示没有选择的文件（或类似的东西）仍然可见。

解决此问题的最常见方法之一是使输入字段不可见（使用CSS），然后使用自定义CSS为标签设置样式以使其看起来像输入字段。由于标签链接到输入字段，因此单击它仍会触发浏览器的文件选择器。输入字段可以以多种方式隐藏 - 常见的选择是将标签放在输入上，然后通过将其不透明度设置为零来隐藏输入。

这是一个粗略的例子。

.form-control {
  position: relative;
}

.input {
  position: absolute;
  top: 0;
  bottom: 0;
  opacity: 0;
}

.btn {
  border: 1px solid black;
  padding: 5px;
}

和上面的工作fiddle！