Why does htmx:xhr:loadstart fire twice? #3220

cuboci · 2025-03-05T09:35:42Z

cuboci
Mar 5, 2025

Hi everyone,

I'm trying to implement a file upload with a progress bar. The progress bar should be hidden until the user starts the upload.
I've tried to add a listener for the htmx:xhr:loadstart event, use the htmx:xhr:progress event to update the progress bar and hide it again on htmx:xhr:loadend (or ...:abort).
Weirdly though, the loadstart event seems to fire twice on the file input element and I don't see why. Here's a minimal example to reproduce the behaviour:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>HTMX test</title>
        <script src="https://unpkg.com/[email protected]"></script>
        <script>
            let fired=0;
            document.addEventListener("DOMContentLoaded", function() {
                document.body.addEventListener("htmx:xhr:loadstart", function(ev) {
                    fired++;
                    console.log("target:", ev.target.id, fired);
                });
            });
        </script>
        <style>
            .hidden {
                display: none;
            }
            #uploadBox {
                display: flex;
                flex-direction: column;
            }
        </style>
    </head>
    <body>
        <div id="uploadBox">
            <label id="uploadLabel" for="fileUpload">
                <p>click here</p>
                <input id="fileUpload" type="file" name="fileUpload" class="hidden"
                    hx-post="/upload" hx-encoding="multipart/form-data" hx-swap="outerHTML"
                    hx-target="#uploadBox">
            </label>
            <progress id="progress" min="0" max="100" value="0" class="hidden">0%</progress>
        </div>
    </body>
</html>

Am I missing something? It actually fires twice on the exact same element (#fileUpload). Should I perhaps not use htmx:xhr:loadstart but htmx:configRequest for this?

cuboci · 2025-03-05T09:56:15Z

cuboci
Mar 5, 2025
Author

I've had another idea. There's actually no need to use event listeners at all to show or hide the progress bar. I can just use CSS to show it when the file input element has the .htmx-request class set, like so:

input[type='file'] ~ progress {
    display: none;
}
input[type='file'].htmx-request ~ progress {
    display: block;
}

(Note: This doesn't really work in the minimal example about because progress is not a sibling of the input element but the general idea is the same.)

But that's just an aside. I'd still like to know why the event is fired twice.

0 replies

Telroshan · 2025-03-06T07:25:58Z

Telroshan
Mar 6, 2025
Collaborator

Hey, that doesn't sound normal indeed

Looking at the code, I see this

htmx/src/htmx.js

Lines 4526 to 4533 in 07d3518

    
           forEach(['loadstart', 'loadend', 'progress', 'abort'], function(eventName) { 
        
             forEach([xhr, xhr.upload], function(target) { 
        
               target.addEventListener(eventName, function(event) { 
        
                 triggerEvent(elt, 'htmx:xhr:' + eventName, { 
        
                   lengthComputable: event.lengthComputable, 
        
                   loaded: event.loaded, 
        
                   total: event.total 
        
                 })

Looks like this part of the code has been here for quite a long time (added in this 2020 commit : 3b115c0)

I would imagine that it was added to make sure that XMLHTTPRequests making an upload would properly fire events, but this might end up in double calls if both the request and its upload property get listeners bound to them.

Just a gut guess though
Maybe adding a temporary log of the target variable in the code snippet above would confirm or infirm what I just described (i.e. does one log the xhr itself while the other logs its upload object?)

If you are interested, please feel free to open an actual GitHub issue for that & investigate it! Bugfix PRs are highly appreciated

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Why does htmx:xhr:loadstart fire twice? #3220

{{title}}

Replies: 2 comments

{{title}}

{{title}}

Select a reply

Why does htmx:xhr:loadstart fire twice? #3220

cuboci Mar 5, 2025

Replies: 2 comments

cuboci Mar 5, 2025 Author

Telroshan Mar 6, 2025 Collaborator

cuboci
Mar 5, 2025

cuboci
Mar 5, 2025
Author

Telroshan
Mar 6, 2025
Collaborator