Rails - 如何利用 Active Storage JavaScript 事件答案

【问题标题】：Rails - How to make use of Active Storage JavaScript eventsRails - 如何利用 Active Storage JavaScript 事件
【发布时间】：2017-10-31 16:11:45
【问题描述】：

我正在与 RubyonRails 的 Active Storage 合作，似乎在提交表单时会执行某些 JavaScript 事件（至少这是我的理解），我正在尝试监听这些事件。

我的表单很简单，只有一个输入字段和图像字段

<%= form_with(model: to_do, local: true, id: 'image_form') do |form| %>
  <div class="field">
    <%= form.label :title %>
    <%= form.text_field :title, id: :to_do_title %>
  </div>  
  <div class="field">
    <%= form.label :image %>
     <%= form.file_field :image, direct_upload: true %><br>
  </div>

  <div class="actions">
    <%= form.submit id: 'submit_button' %>
  </div>
<% end %>

在application.js 文件中，我添加了以下代码来测试会发生什么，但不幸的是我的尝试都不起作用

addEventListener("direct-upload:initialize", doSomething, false);

function doSomething(e) {
    alert("Event is called: " + e.type);
}

document.getElementById("image_form").addEventListener("direct-upload:initialize", function() {
  console.log('direct-uploads:initialize')
});

document.getElementById("image_form").addEventListener("direct-uploads:end", function() {
  console.log('direct-uploads:start')
});

当我提交表单时，虽然数据已保存在数据库中，但我的事件监听器没有监听事件，因为我没有收到任何警报。

所以我的问题是

表单提交时如何监听这些Active Storagejavascript事件？

任何帮助将不胜感激。

【问题讨论】：

标签： ruby-on-rails rails-activestorage

【解决方案1】：

可能是表单提交发生得太快，因此您看不到任何事件侦听器的输出。

首先使用您的表单将其添加到您的视图中：

<%= form_with(model: to_do, local: true, id: 'image_form') do |form| %>
  ... form stuff ...
<% end %>

<script type="text/javascript">
  console.log(document.querySelector('#image_form')); // Log the form, for debugging      
  document.querySelector('#image_form').addEventListener('direct-uploads:start', function() {
    console.log('Event was called');
  });
</script>

此外，您可能希望在提交表单之前保留 Web 浏览器的控制台日志，以便您看到日志消息。

【讨论】：

感谢您的观看，但不幸的是这也不起作用
您将 javascript 添加到视图中，而不是您的 application.js？您的 JS 在添加到 application.js 时可能无法正常工作，因为 DOM 可能未加载（假设它包含在您文档的 head 中）。
是的，我在视图中添加了它并从 application.js 文件中删除了它
您确定您的文件是直接上传到您的云提供商，而不仅仅是在表单中上传吗？
是的，文件正在被上传到一个 AWS 存储桶中，我已经确认了这一点，但是我不确定您的第二个陈述“不仅仅是在表单中上传？”是什么意思？

【解决方案2】：

您可以在输入字段本身上监听事件。所以在你的情况下，它将是

"#{model_name}_#{attachment_name}" which is to_do_image


document.getElementById("to_do_image").addEventListener("direct-upload:initialize",
function() {
  console.log('direct-uploads:initialize')
});

document.getElementById("image_form").addEventListener("direct-uploads:end", function() {
  console.log('direct-uploads:start')
});

【讨论】：