Попытка отобразить Uppy Uploader в пределах simple_from - PullRequest
Новая
       16

Попытка отобразить Uppy Uploader в пределах simple_from

0 голосов
/ 10 октября 2018

Мне удалось включить загрузчик uppy, добавив класс «dashboard-container» в список классов input[type=file] simple_form, но мой загрузчик не отображается в поле.

Как вы можете видетьиз консоли он загружается должным образом, но кнопка «Выбрать файл» по умолчанию все еще отображается, и где-то должен быть конфликт.

Мне также удается поиграть с CSS-файлом simple_form и моим классом-панелью-контейнеромтакже, как вы можете видеть, я добавил немного радиуса от самого simple_form scss и некоторую черную рамку из контейнера панели инструментов.

Результаты с консоли

Вот мой простой код: 

<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

1 Ответ

0 голосов
/ 26 февраля 2019

Так что, если вы используете 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

...