Feature request: Direct Uploads Support

[hwhelchel]

trafficstars

Active Storage lets you upload files from the client directly to the cloud by setting direct_upload: true on your file_field in the form.

Would be awesome if Bootstrap Form automatically hooked into this feature and showed a visual progress bar of the file uploading using standard Bootstrap components.

https://edgeguides.rubyonrails.org/active_storage_overview.html#direct-uploads

[lcreid]

That's a great suggestion. We're very open to a pull request to provide this feature. Personally I'm a little busy right now, but if no one else picks it up in the next few months I'll take a look.

[hwhelchel]

@lcreid awesome thanks!

[Bodata]

A workaround regarding the problem:

I did not get any progressbar when using bootstrap_form_for. When i changed back to a form_for this worked. In order to get it to work i had to remove the label added by bootstrap_form. (a poormans option)

I made this work bij changing the direct-upload:initialize code

'addEventListener("direct-upload:initialize", event => {
  const { target, detail } = event
  const { id, file } = detail
  target.insertAdjacentHTML("beforebegin",
  ......
  )
  target.previousElementSibling.querySelector(`.direct-upload__filename`).textContent = file.name
})

and changed it into

'addEventListener("direct-upload:initialize", event => {
  const { target, detail } = event
  const { id, file } = detail
  var custom_file_labels = document.getElementsByClassName("custom-file-label");
  while (custom_file_labels[0]) {
    custom_file_labels[0].parentNode.removeChild(custom_file_labels[0])
  }
  target.insertAdjacentHTML("beforebegin",
  ......
  )
  target.previousElementSibling.querySelector(`.direct-upload__filename`).textContent = file.name
})

Hope this works for others too.

[lcreid]

A very belated, but very big, thanks for your suggestion. We'll look at how we can incorporate this into the gem. Feel free to send us a pull request if you think you have an idea for how we could do it.