Can I download a file using API

Wappler General How To
#1

Hey Everyone,

I am trying to download a file using an API request, however the file is not being downloaded, so is this currently possible in wappler?

I have tried using a server connect api, and an app connect api request, using both methods I am getting a 200 OK response, with data like the one below and the file is not being downloaded.

    {data: "%PDF-1.4
1 0 obj
<<
/Title (��)
/Creator (��"  etc....}

The api GET request works fine when I call it simply from the browser, and the file is being downloaded, however in wappler it is not working.

Can I do anything to make it work, or is this not possible currently in Wappler?

1 Like
#2

How are you running the server action on your page?

#3

Hi Teodor,

on button click event, like this:

<button id="btn1" class="btn btn-primary" dmx-on:click="api1.load({recordid: Id})" dmx-show="(FinishedDate.length() > 0)">Download file</button>

I can send you the api in private if you wish to try.

#4

Please try calling the server action directly with a link (anchor button) instead.

#5

Hi Teodor,

I tried doing that and it didn’t work, it is giving me this error:

image
image1355×118 15 KB

<a class="btn" href="api/Form/downloadForm/19">Download</a>

I also tried adding the api request directly as a dmx-bind href and it worked instantly, but I can’t go with that because the api request needs to be secured with an authorization token and I don’t think I can pass that from a url call.

<a class="btn" dmx-bind:href="'https://myurladdress?method=FormDownload&amp;Recordid='+Id">Anchor Button</a>

Any suggestions on why I am receiving this error, like for some reason it says “Illegal characters in path” ?

#6

Well then how do you send this authorization token when calling the server action with the button using ajax?

#7

I have the authorization token saved as a cookie when the user logs in, and I pass that to the api request as a header with Authorization, like this:

image

If it is possible to pass the Authorization that is under Headers directly from the url, then I can continue with the dmx-bind href option, but I don’t know how to do that

#8

Server Connect always returns his data as json. You can try to use the Response step to output the API response directly. At this moment the Response is very limited, it doesn’t allow you to set headers or content type, so can’t promise it will work. Set the Text option to the output of the API {{api1}}. On the client-side use the Server Connect url on a link and add the download attribute to it, you can also set a filename there. https://www.w3schools.com/tags/att_a_download.asp

This should at least work with text based files, not sure if it works with binary files.

#9

Hi Patrick,

The download attribute is working fine by downloading the file, but it is not getting the right file to download, so it ends up downloading the html of the page.

I think I have an issue with the server connect route not passing in correctly the id parameter.

This is my sc route: /api/IntakeForm/downloadForm/:id
and this is the anchor button:

<a class="btn" href="api/IntakeForm/downloadForm/59fd8e" download="api/IntakeForm/downloadForm/59fd8e">route Download</a>

I am still getting “Illegal characters in path” as response (same as img posted earlier) when I try running the server connect route directly like this http://localhost:3000/api/IntakeForm/downloadForm/59fd8e

#10

Were you able to solve the problem? I can’t download the file via the API either. I get a CSV file in response, but instead of downloading it, Wappler converts it to JSON.

#11
#12

With API do you mean the server action or the API component? The API component cannot download files and with a server action you need to have a download action step inside it and then use a link tag for the download.

#13

@patrick, I mean the server action. I make a GET request to the data provider and get a file in response.

I tried adding the “Download file” and “Export CSV” components after the “API connection”, but nothing worked out for me. If JSON comes in response, then it can be saved to a file using the “Export CSV” component, and if CSV comes in response, then this component no longer works.

#14

So you are actually using the API Action component to connect to an external API - is that correct?
What is the response from this external API exactly?