Form submission with file input with turbo drive

1

Hi

I have a form with a file input. The file get’s attached in a stimulus controller via a DataTransfer instance and the form submitted by calling requestSubmit(). Like this, turbo takes care of the ajax form submission and the response handling (including triggering all the necessary turbo events).

let container = new DataTransfer();
container.items.add(file);
this.fileInputTarget.files = container.files;
this.checkUploadFormTarget.requestSubmit();

The DataTransfer constructor is not available on iOS < 14.5. As workaround, I can create a FormData instance from the form, attach the file to the formdata instance and submit it manually via fetch. I can then manually replace the body with the html from the fetch response, but need to somehow manually trigger the turbo events to have the new page properly loaded.

const formData = new FormData(this.mediumUploadFormTarget);
formData.set(this.mediumFileInputTarget.name, blob, filename);
const response = await fetch(this.mediumUploadFormTarget.action, {
    method: this.mediumUploadFormTarget.method,
    body: formData,
});
// do what it takes to have the body (html) properly rendered

Is there an easier way to handle this if you need to support older iOS versions?