编辑嵌套表单的提交 btn

Question

我想自定义提交文件btn。为此，我正在使用纯粹的css技巧。但问题是，这比编辑之前效果不佳。我正在使用 cocoon 将图像作为嵌套文件添加到我的实例中。

我正在改变这个(工作完美(：

<div class="nested-fields col m4 s6">
<div class="flat_photo_box">
<%= f.file_field :image %>
</div>
</div>

进入这个(部分工作(：

<div class="nested-fields col m4 s6">
<div class="image-upload">
<label for="file-input<%=f.object.id%>">
<span class="fa fa-download trash_nested_form"></span>
</label>
<%= f.file_field :image, id:"file-input#{f.object.id}" %>
</div>
</div>

有了这个 css 技巧：

.image-upload > input
{
display: none;
}
.image-upload > label{
cursor:pointer;
}

错误 = 我可以创建比我想要的尽可能多的嵌套表单，但回形针只将我上传到第一个嵌套元素的最后一张图像保存。您是否知道错误可能来自哪里

Answer 1

你给file_field分配一个id，html-id应该是唯一的。虽然页面将正确呈现，但在提交表单时，只会将一个提交到服务器。而是像这样写你的字段：

<%= f.file_field :image, class:"file-input#{f.object.id}" %>

为什么要分配特定 ID？