Rails Activestorage + DirectUpload индикатор выполнения JavaScript не отображается при использовании «remote: true» - PullRequest
Новая
       11

Rails Activestorage + DirectUpload индикатор выполнения JavaScript не отображается при использовании «remote: true»

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

Я использую Rails ActiveStorage DirectUpload в своем приложении Rails.А вот код формы: 

<h3>Select Files To Upload</h3>

<%= form_for @uploader, url: uploaders_file_path(@uploader), :html => {:multipart => true} do |f| %>
  <%= f.file_field :file, direct_upload: true,  class: "form-control" %>

  <%= f.button type: "submit", id: "submit-uploader", class: "btn btn-primary btn-md", data: {disable_with: "Uploading..."} do %>
    Upload
  <% end %>
<% end %>

Все работает нормально, индикатор выполнения также показывает, когда я загружаю файл:

enter image description here

Но, когда я пытаюсь сделать форму для отправки в формате js, индикатор выполнения не отображается, даже если загрузка файла прошла успешно.Я просто добавил «remote: true», чтобы форма отправлялась как js.Но теперь индикатор выполнения больше не отображается.

Вот новый код вида: 

<%= form_for @uploader, url: uploaders_file_path(@uploader), remote: true, :html => {:multipart => true} do |f| %>
  <%= f.file_field :file, direct_upload: true,  class: "form-control" %>

  <%= f.button type: "submit", id: "submit-uploader", class: "btn btn-primary btn-md", data: {disable_with: "Uploading..."} do %>
    Upload
  <% end %>
<% end %>

А вот direct_uploads.js код: 

addEventListener("direct-upload:initialize", event => {
  const { target, detail } = event
  const { id, file } = detail
  target.insertAdjacentHTML("beforebegin", `
    <div id="direct-upload-${id}" class="direct-upload direct-upload--pending">
      <div id="direct-upload-progress-${id}" class="direct-upload__progress" style="width: 0%"></div>
      <span class="direct-upload__filename">${file.name}</span>
    </div>
  `)
})

addEventListener("direct-upload:start", event => {
  const { id } = event.detail
  const element = document.getElementById(`direct-upload-${id}`)
  element.classList.remove("direct-upload--pending")
})

addEventListener("direct-upload:progress", event => {
  const { id, progress } = event.detail
  const progressElement = document.getElementById(`direct-upload-progress-${id}`)
  progressElement.style.width = `${progress}%`
})

addEventListener("direct-upload:error", event => {
  event.preventDefault()
  const { id, error } = event.detail
  const element = document.getElementById(`direct-upload-${id}`)
  element.classList.add("direct-upload--error")
  element.setAttribute("title", error)
})

addEventListener("direct-upload:end", event => {
  const { id } = event.detail
  const element = document.getElementById(`direct-upload-${id}`)
  element.classList.add("direct-upload--complete")
})

Приведенный выше код взят из: https://guides.rubyonrails.org/active_storage_overview.html#direct-uploads

...