ruby-on-rails - Rails - 如何利用 Active Storage JavaScript 事件

Question

我正在使用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 Storage javascript 事件？

任何帮助将不胜感激。

Answer 1

您可以在输入字段本身上收听事件。所以在你的情况下

"#{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')
});

Answer 2

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

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

<%= 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 浏览器的控制台日志，以便您看到日志消息。