单击编辑按钮后，先前上传的文件未显示在rails表单上

Question

单击“编辑”按钮后，先前上传的文件/图像未显示在编辑表单上，它仅显示未选择文件，但文件已存储到数据库中。这是我的下面的halm表格。

.....
.....

.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" />标记的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！