How to download a file htmx way?

[wojciech-mazur-mlg]

Hello,

We are developing a web app using python FastAPI and htmx. We have a scenario of generating a file to download which seems to be quite common, but we don't know how to handle it correctly (in an interactive way) using htmx.

The scenario should look like this:

1. User wants to download a file. User calls /download endpoint
2. User should receive a toast message that file is being generated and download will start shortly (generating file takes some time)
3. During file generation we want to see a spinning circle (using hx-indicator)
4. When file generation is finished, user is able to save the file using regular browser window and spinner is gone.

This is the desired scenario, but the biggest limitation is that htmx can't return a file, we need to issue "full" request to get a file.

Our current implementation is like this:

1. User wants to download a file. User calls /download endpoint
2. /download endpoint returns a partial html with toast message and this div:

<div hx-get="/generate-file" hx-indicator="#content-spinner-overlay" hx-trigger="load" _="on htmx:afterRequest remove me"></div>

3. Thanks to this div, browser calls /generate-file endpoint which should return a proper file using FastAPI StreamingResponse.
4. We can't return a file from ajax request, so the workaround is

if request.headers.get("HX-Request"):
    return fastapi.Response(headers={"HX-Redirect": request.url})

5. This results in browser redirecting to the same /generate-file endpoint (but it's regular request with no HX-Request) and the file is generated and returned correctly....but
6. The request done with no HX-Request, so we no longer see hx-indicator. We're also not able to handle the end of file generation.

Is there a proper way to handle such scenario? Do you have any ideas? Thank for any help.

[Telroshan]

AFAIK, the common technique to trigger a file download without user interaction from javascript is by creating a dummy hidden link with a download attribute and calling click on it.
I see you're using hyperscript, you could probably use a standard a element like

<a href="/generate-file" download
    _="click me, on click remove me"> <!-- I don't know hyperscript's syntax, consider this pseudo code -->

Instead of your current div, and use hyperscript to trigger a click on load.

Clicking the link will trigger your browser's native file download popup with the progress bar showing, so I wouldn't worry about the lack of hx-indicator in this case as the browser itself will show progress for that download.

Hope this helps!

[wojciech-mazur-mlg]

Sorry for late response. I was testing a lot. Your answer seems to make sense, but it doesn't solve the issue I'm facing with. I don't want to display file download progress. My problem is long time of file generation (sometimes around 30 seconds due to lot of processing). I want to display hx-indicator (or any spinner displayed manually) during file generation. I'm able to show the spinner before I start generating a file, but the crucial thing is to capture the moment when file generation is ready to download to hide the spinner.

[Telroshan]

Ok so if I understand correctly @wojciech-mazur-mlg , you want to show a spinner while generating a file on your backend.

I'm not sure I understand your setup then, but I would simply do the following:

• Button (or whatever other element) triggers a request to, say, /generate-file
• The server does its processing in the request's response, without answering until the file is ready, with an increased request timeout value if you need one
• While the request is in flight and waiting for the server's reponse, htmx will naturally display the spinner
• You can return an HTML fragment after the file is generated in the request response, either with A) some inline script to manually trigger the file download, or B) redirect the user to the file's page (using HX-Redirect) to naturally trigger a download in their browser as well, or C) render a link element that points to the file's URL with download attribute to let the user download on click. Many solutions for this parts.

Hope this helps, let me know if I missed something again