使用"remote:true"时,Rails Activestorage + DirectUpload javascript进度条不显示

Question

我一直在我的Rails应用程序中使用Rails ActiveStorage DirectUpload.以下是表单的代码:

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

一切正常,当我上传文件时,进度条也会显示:

但是,当我尝试将表单作为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

Answer 1

尝试此DirectUpload 指南部分。

DirectUpload直接与班级合作让您可以使用remote: true.

1. 捕获提交 ( event.preventDefault())
2. 使用类上传文件DirectUpload。它提供了显示进度条和所有内容的事件。
3. 请于 之前提交您的表格js。

意味着更多的代码，但它是一个选项。