Rails Activestorage + DirectUpload javascript进度条在使用“remote：true”时不显示

Posted 2023-02-15

【中文标题】Rails Activestorage + DirectUpload javascript进度条在使用“remote：true”时不显示

【英文标题】：Rails Activestorage + DirectUpload javascript progress bar not showing when using "remote:true"

【发布时间】：2019-03-06 02:13:32

【问题描述】：

我一直在我的 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

【问题讨论】：

同样用$(file_field_id).closest('form').submit();之类的js手动提交表单也不显示进度条。

我无法在简单的 rails 5.2.1 应用程序上重现此行为。您可以查看here 以获取与您的表格完全相同的简单示例。只要您有提交输入，就会出现进度条。

【参考方案1】：

试试这个DirectUpload guide section。

直接使用DirectUpload 类可以让您使用remote: true 提交。

赶上提交 (event.preventDefault()) 使用DirectUpload 类上传文件。它提供了显示进度条和所有内容的事件。 通过js提交您的表单。

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