Rails Activestorage + DirectUpload javascript progress bar not showing when using "remote:true"

I have been using Rails ActiveStorage DirectUpload in my Rails app. And here is the code of the form:

<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 %>

Everything works alright and the progress bar is also showing when i upload the file:

But, when I try to make the form to be submitted as js, the progress bar is not showing even though the file upload is successful. I just added "remote: true" to make the form to be submitted as js. But now the progress bar is no longer showing.

Here is the new code of the form:

<%= 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 %>

And here is direct_uploads.js code:

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")
})

The above code is taken from: https://guides.rubyonrails.org/active_storage_overview.html#direct-uploads

from Rails Activestorage + DirectUpload javascript progress bar not showing when using "remote:true"