试图在simple_from中显示Uppy上传器

Question

我已成功设法通过在simple_form的input[type=file]类列表中添加一个名为“dashboard-container”的类来包含uppy uploader，但我的上传器不会显示在该字段中。

正如您在控制台中看到的那样，它正在正确加载，但默认的“选择文件”按钮仍在呈现，并且某处必定存在冲突。

我也设法使用simple_form css和我的仪表板容器类，你可以看到我从simple_form scss本身添加了一些半径，并从我的仪表板容器中添加了一些黑色边框。

Results from the console

这是我的simple_form代码：

<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>

回购在这里：https://github.com/thomasbromehead/log1/tree/simple_form

我非常感谢一些帮助。我在Rails 5.2和Webpack 3.12上

Answer 1

因此，如果您使用Webpacker来处理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在目标元素中显示仪表板而不是模态，replaceTargetContent执行它所说的内容，将仪表板放在目标中，而不是之前的任何内容（即表单字段）。

要引用的Uppy文档在这里：

https://uppy.io/docs/dashboard/#inline-false

https://uppy.io/docs/dashboard/#replaceTargetContent-false