turbo: Turbo uses Fetch which doesn't support progress

Hi,

I’m here to ask for a new feature. I have a project where I can submit heavy files and I would like to be able to follow the progress. An easy way would be to catch the form submit event, cancel it, repeat it by Ajax and follow the progress.

Pseudo code of something working (partially) with Axios

  document.querySelectorAll('form.progressable').forEach((form) => {
    form.addEventListener('submit', (e) => {
      e.preventDefault();

      // Modal has a progress bar
      const modal = new Bootstrap.Modal(formSubmitModal, {});
      const formData = new FormData(e.target);
      
      modal.show();

      Axios.post(e.target.action, formData, {onUploadProgress: onUploadProgress, signal: axiosController.signal})
        .then((response) => {
          if (response.status === 200) {
            Turbo.visit(response.request.responseURL, {action: "replace"});
          } else if (response.status === 301 || response.status === 302) {
            Turbo.visit(response.headers.location, {action: "replace"});
          }
        })
        .catch(() => {
          modal.hide();
        });
    });
  });

The only issue with this code is that on invalid form submission (HTTP 422), I can’t load the new response in the page so I lose the validation errors. (is there a way to?)

Best case scenario I would not listen to a form submit and I would instead somehow listen for progress on the form submission itself.

  document.addEventListener('turbo:submit-start', (e) => {
    console.log(e.detail.formSubmission.fetchRequest)
  });

Based on my research, it’s not yet possible to listen for progress with Fetch It’s planned: https://chromestatus.com/feature/5274139738767360

Is there any workaround?