File Drop HTMX Bug
Nobody has claimed this yet.
- Dominant language
- Go
- Stars
- 36.3k
- Forks
- 1.9k
- Avg merge
- 2d 11h
- Merged PRs (30d)
- 33
Description
Description
File drop doesn't work on an element that's been added to the DOM using templ + htmx, seems OK when I test in the index.html
To Reproduce
- Setup HTMX
Services: []application.Service{
application.NewService(&GreetService{}),
application.NewServiceWithOptions(NewChiService(), application.ServiceOptions{
Route: "/hx",
}),
},
package main
import (
"changeme/frontend/components/card"
"context"
"fmt"
"net/http"
"github.com/go-chi/chi/v5"
)
func NewChiService() *chi.Mux {
r := chi.NewRouter()
r.Get("/test", Test)
return r
}
func Test(w http.ResponseWriter, r *http.Request) {
fmt.Println("Test called")
component := card.Card()
_ = component.Render(context.Background(), w)
}
Send the HTML via HTMX
<div id="upload" class="drop-zone" data-file-drop-target>
Drop files here
</div>
Ensure File Drop Enabled as per docs : https://v3alpha.wails.io/features/drag-and-drop/files/#enable-file-drop
Expected behaviour
File path returned
Screenshots
No response
Attempted Fixes
No response
System Details
>wails doctor
Wails Doctor
# Wails
Version | v2.10.1
# System
┌─────────────────────────────────────────────────────────────────────────────────────────────────┐
| OS | Windows 10 Home |
| Version | 2009 (Build: 26200) |
| ID | 25H2 |
| Go Version | go1.24.1 |
| Platform | windows |
| Architecture | amd64 |
| CPU | AMD Ryzen 9 9950X3D 16-Core Processor |
| GPU 1 | AMD Radeon(TM) Graphics (Advanced Micro Devices, Inc.) - Driver: 32.0.21041.1000 |
| GPU 2 | AMD Radeon RX 9070 XT (Advanced Micro Devices, Inc.) - Driver: 32.0.23017.1001 |
| Memory | 32GB |
└─────────────────────────────────────────────────────────────────────────────────────────────────┘
# Dependencies
┌───────────────────────────────────────────────────────┐
| Dependency | Package Name | Status | Version |
| WebView2 | N/A | Installed | 145.0.3800.70 |
| Nodejs | N/A | Installed | 25.2.1 |
| npm | N/A | Installed | 11.6.2 |
| *upx | N/A | Available | |
| *nsis | N/A | Available | |
| |
└─────────────── * - Optional Dependency ───────────────┘
# Diagnosis
Optional package(s) installation details:
- upx : Available at https://upx.github.io/
- nsis : More info at https://wails.io/docs/guides/windows-installer/
SUCCESS Your system is ready for Wails development!
♥ If Wails is useful to you or your company, please consider sponsoring the project:
https://github.com/sponsors/leaanthony
Additional context
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Read the file-drop enablement documentation and compare the working behavior in index.html with the HTML returned by the /test HTMX endpoint. Reproduce the issue with the dynamically inserted drop-zone element and inspect its DOM behavior. Done means a file path is returned for files dropped on the HTMX-rendered element.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- go, javascript
- Domain
- desktop-dev, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100