Ruby on rails 试图在一个简单的\u中显示Uppy uploader，从

我已成功地将uppy uploader包括在内，方法是将一个名为“dashboard container”的类添加到simple_表单的

input[type=file]

类列表中，但我的uploader没有显示在该字段中

正如您从控制台看到的，它正在正确加载，但默认的“选择文件”按钮仍在呈现，并且一定在某个地方存在冲突

我还设法使用simple_form css和我的dashboard容器类，正如您所看到的，我从simple_form scss本身添加了一些半径，从我的dashboard容器添加了一些黑色边框

以下是我的简单表单代码：

<div id="new_flat_form_container">
    <div id="new_flat_form">
        <%= simple_form_for flat do |f| %>
        <%= f.input :title, label: "Titre", hint:"Quelques mots pour décrire votre logement" %>
        <%= f.input :category, label: "Catégorie", collection: ["maison", "appartement", "terrain", "caravane", "camping-car"]%>
        <%= f.input :description, as: :text %>
        <%= f.input :nb_of_bathrooms, label: "Nombre de salles de bain", input_html: {class: 'form-control btn-lg col-sm-6'}, collection:1..5 %>
        <%= f.input :photos, as: :file, multiple: true,direct_upload: true %>
        <%= f.input :price_per_night, label: "Prix par nuit, en DU", hint:"A exprimer en DU pour nous habituer à compter ainsi"%>
        <div class="row">
            <%= f.button :submit, value: "Je crée mon logement", class:"btn btn-success col-sm-6 col-sm-offset-3" %>
        </div>
        <% end %>
    </div>
</div>

回购协议如下：

我将非常感谢您的帮助。

---

我使用的是Rails 5.2和Webpack 3.12，因此如果您使用Webpack处理您的Webpack配置，此设置对我有效：

import Uppy from '@uppy/core'
import Dashboard from '@uppy/dashboard'

const uppy = Uppy({
  id: 'yourIdName',
})
  .use(Dashboard, {
    target: '#your-target-element',
    replaceTargetContent: true,
    inline: true,
  })

uppy.on('complete', (result) => {
  console.log('Upload complete! We’ve uploaded these files:', result.successful)
})

这里的重要值是

replaceTargetContent

和

inline

属性

inline

在目标元素中显示仪表板，而不是作为模式显示，并且

replacettargetcontent

按照它所说的做，将仪表板放在目标元素中，而不是之前的任何内容（即表单字段）

需要参考的Uppy文件如下：

---

如果你点击“选择文件”按钮，它能工作吗？如果不能，还有日志吗？@JohnBaker:显然，Uppy使用了默认的file\u字段，但隐藏了它，所以它确实需要在那里。没有实现它，但阅读别人的代码，这就是我理解的。尝试将此功能用于Shieline和S3，但超出了我现在的处理能力；）谢谢你的帮助和回答，是的，按钮工作了，但是Uppy没有显示出来，因为我在JS中没有正确地调用它。