Question

通过将一个名为“ dashboard-container”的类添加到simple_form的input[type=file]类列表中，我已经成功地包含了uppy上传器，但是我的上传器没有显示在该字段中。

从控制台中可以看到，它已正确加载，但是默认的“选择文件”按钮仍在呈现，并且某处必须存在冲突。

我还设法使用simple_form css和我的仪表板容器类，如您所见，我在simple_form scss自身中添加了一些半径，并在我的仪表板容器中添加了一些黑色边框。

这是我的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将Dashboard显示在目标元素中而不是模式，而replaceTargetContent则按照其说明进行操作，将Dashboard放置在目标中，而不是之前存在的任何内容（即表单字段）。

要引用的Uppy文档在这里：

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

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

尝试在simple_from中显示Uppy上传器

1 个答案: