Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Turbo uses Fetch which doesn't support progress
See original GitHub issueHi,
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?
Issue Analytics
- State:
- Created a year ago
- Comments:17 (9 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
Glad you figured out it out. Sorry, can’t help with browser fetch lacking in progress reporting.
Thanks for the help, I will head to the discuss website.
Just want to add that your exemple is flawed because the
<head>is not including any javascript and you’re Turbo.visit an HTML snipped that doesn’t include any JS either.My Rails application share the same
<head>across all the pages and the Turbo is included in the JS file that is included in the<head>. I don’t know what is the difference between doing what I’m doing and a click on an anchor<a>link, but the response is the same and it only generates an error when I’m manually trying to visit an HTML string response. When I click anchor link it works as expectedEdit: Linking issue https://discuss.hotwired.dev/t/turbo-visit-with-html-response-generates-error-an-is-inconsistent/4348 Edit 2: Workaround that works for now is