Rails - How to make use of Active Storage JavaScript events - ruby-on-rails

Question

I am working with Active Storage of RubyonRails, it seems that when a form is submitted certain JavaScript events are executed (at least this is what my understanding is) and I am trying to listen to these events.
My form is pretty simple just an input field and image field
<%= 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 %>
Inside application.js file I added the following code to test what happens but unfortunately none of my tries work
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')
});
When I submit the form although the data gets saved in database but my event listener does not listen to the event as i do not get any alert.
So my question is
How to listen to these Active Storage javascript events when a form is submitted?
Any help will be really appreciated.

Answer 1

It's likely that the form submission is happening too quickly, and therefore you can't see any of the event listener's output.
Start with adding this to your view with your form:
<%= 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>
Additionally, you may want to preserve your web browser's console log prior to submitting the form, so you'd see the log message.

Answer 2

You can listen to events on the input field itself.
So in your case it will be
"#{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')
});