Problem with Server Action Download File

I’m struggling with the Server Action Download File.

I’m trying to download a PDF File with a button in a Server Connect Form.

My problem is that I get the source of the file (%PDF-1.4 %âãÏÓ 1 0 obj << …) instead of the file.

What am I missing?

Are you sure you followed the docs?

The first part yes, with the difference, that I use it with a dynamic file. It gets the path information from the database filtered by the POST variable.

For the second part I thought I could use POST instead of GET, that’s why I used Server Connect Form. Does it only work with a GET variable?

You need to use a direct link to your server action (using an anchor <a>) you cannot do it when posting a form.

1 Like

Thanks for your help and clarification.

Using NodeJS and Wappler Version 3.1.0

Same issue here with Server Action Download File.

I’m trying to download a File with a button using dynamic event to load serverconnect and pass the file name parameter (stored in a variable). On click I get the following response in the browser devtools- network

Request URL:http://localhost:3000/api/dwnldReport?filename=Dummy.pdf (copy-pasting this path in browser downloads the file successfully)

Request Method: GET
Status Code:200 OK
Preview/Response: %PDF-1.3 %ºß¬à 3 0 obj <</Type /Page…

Please advise.

You need to use a link (anchor) to call your download server action, not via a dynamic event.

Tried the following:

  1. Anchor Button > Link > api/dwnldReport/{{varDownloadReport.value}}

Code:
<a class="btn" href="api/dwnldReport/{{varDownloadReport.value}}">Anchor Button</a>

Response: {“status”:“404”,“message”:"/api/dwnldReport/%7B%7BvarDownloadReport.value%7D%7D not found."}

  1. Link > Link > api/dwnldReport/{{varDownloadReport.value}}

Code: <a href="api/dwnldReport/{{varDownloadReport.value}}">Your link title</a>

Response: {“status”:“404”,“message”:"/api/dwnldReport/%7B%7BvarDownloadReport.value%7D%7D not found."}

Well you need to use dynamic link for this (dynamic attributes > links > link ) to add dynamic values in the href.
The resulting code would be:

<a class="btn" dmx-bind:href="'api/dwnldReport/' + varDownloadReport.value">Anchor Button</a>

Tried as you said, got the same expression as you wrote:
<a class="btn" dmx-bind:href="'api/dwnldReport/' + varDownloadReport.value">Anchor Button</a>

Response:
{“status”:“404”,“message”:"/api/dwnldReport/Dummy.pdf not found."}

I have the following setup
Server connect config:

Route Config:

Browser Response:

What are you trying to do exactly? The anchor/link must point to the server action, not to the actual file.
Then in the server action you provide the link to this file.

I have a table with a list of people and their reports (pdf files) are uploaded in a folder inside the project. The filename is stored in the database. I am trying to give a link in the same table to download the report in front of each person’s name.
For this I have a serverconnect to get the filename from db and store it in a variable. Then another serverconnect for filedownload to be called when i click the download link and pass the filename stored in the variable to serverconnect for file download.

I see you want to pass it as a GET var and your route looks correct. So indeed this is the correct syntax:

<a class="btn" dmx-bind:href="'api/dwnldReport/' + varDownloadReport.value">Anchor Button</a>

and it should be working just fine.

What server model are you using?

Using NodeJS and Wappler Version 3.1.0

Which is your real path to the file Dummy.pdf? Is it really under “api/dwnldReport/”?

Then this should be some nodejs relater problem with the download component. @patrick will check this.

real path inside project root folder: /reports/Dummy.pdf

Noted.
It looks like an issue to me too. But I am new to coding so dont know the way around. I am still learning new things everyday on Wappler.

I think that is the problem. You don’t have to put the path “api/dwnldReport/” in the value field of the dynamic attribute.