How to make use of Active Storage javascript events

I am reading the Active Storage documentation available here and I am trying to find out how to display a progress bar. Just to test I added the following code inside my application.js

The image gets uploaded on amazon just fine but I see nothing in browser’s console

	addEventListener("direct-upload:initialize", doSomething, false);
function doSomething(e) {
alert("Event is called: " + e.type);
}

I also tried this but I do not see anything in console.

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

I would like to know how to make use of the events available?

Any help will be really appreciated as I am really stuck and cant find any material on how to do this.