# Download a file and then connection lost

**URL:** <https://discourse.nodered.org/t/download-a-file-and-then-connection-lost/31541>\
**Category:** General\
**Created:** [14 August 2020 03:16 UTC](https://discourse.nodered.org/t/download-a-file-and-then-connection-lost/31541 "2020-08-14T03:16:18Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![apex](https://avatars.discourse-cdn.com/v4/letter/a/e56c9b/32.png) [@apex](https://discourse.nodered.org/u/apex)\
**Post date:** [14 August 2020 03:16 UTC](https://discourse.nodered.org/t/download-a-file-and-then-connection-lost/31541/1 "2020-08-14T03:16:18Z")

</div>

hi guy i have make a API call and save the result to the CSV file ,  
and then using a button to download it

I follow the example here  
[https://flows.nodered.org/flow/db68bd4934cf46f39e6e453a348bc419](https://flows.nodered.org/flow/db68bd4934cf46f39e6e453a348bc419)

THE PROBLEM is :  
everytime i press the button , i can download the file but THE "CONNECTION LOST " was appear and my broswer refresh(FIREFOX)  
i search this forum have some similar problem but none of the solution suggested resolved for me

note that  
i can http request to download the file too

my device are:  
14 Aug 10:40:56 - [info] Node-RED version: v1.0.5  
14 Aug 10:40:56 - [info] Node.js version: v8.17.0  
14 Aug 10:40:56 - [info] Linux 5.3.0-53-generic x64 LE  
14 Aug 10:40:56 - [info] Loading palette nodes  
14 Aug 10:40:58 - [info] Dashboard version 2.21.0 started at /ui  
14 Aug 10:40:58 - [info] Settings file : /home/user/.node-red/settings.js  
14 Aug 10:40:58 - [info] Context store : 'default' [module=memory]  
14 Aug 10:40:58 - [info] User directory : /home/user/.node-red  
14 Aug 10:40:58 - [warn] Projects disabled : editorTheme.projects.enabled=false  
14 Aug 10:40:58 - [info] Flows file : /home/user/.node-red/flows\_oak.json

and i extract some of my flow for neglecting the API part

```auto
[{"id":"af8c4555.1ff13","type":"function","z":"ef630557.23093","name":"Set base path","func":"//restrict to c:\\temp\\\nvar basePath = \"/home/user/nodered_file/\";\nvar filename = msg.req.params.fn;\n\n\nif(filename.includes(\"..\\\\\")){\n msg.payload = \"Illegal file path\";\n msg.statusCode = 405;//not allowed\n return [null, msg];//fire output 2\n} else if(filename.includes(\"../\")){\n msg.payload = \"Illegal file path\";\n msg.statusCode = 405;//not allowed\n return [null, msg];//fire output 2\n} \n//TODO: add more checks\n\nmsg.filename = basePath + filename;\nreturn [msg, null];//fire output 1\n\n\n","outputs":2,"noerr":0,"x":720,"y":1420,"wires":[["2a56c758.bc5138"],["2c10566f.0f4c9a"]]},{"id":"2c10566f.0f4c9a","type":"http response","z":"ef630557.23093","name":"","statusCode":"","headers":{},"x":1310,"y":1500,"wires":[]},{"id":"2a56c758.bc5138","type":"file in","z":"ef630557.23093","name":"","filename":"/home/user/nodered_file/test.log","format":"","chunk":false,"sendError":false,"encoding":"none","x":1030,"y":1400,"wires":[["2c10566f.0f4c9a"]]},{"id":"378caec8.57e3da","type":"catch","z":"ef630557.23093","name":"","scope":null,"uncaught":false,"x":640,"y":1480,"wires":[["5ee02168.e033e","22f9058.917b37a"]]},{"id":"5ee02168.e033e","type":"function","z":"ef630557.23093","name":"Set 404","func":"msg.payload = msg.error;\nmsg.statusCode = 404;//resource not found\nreturn msg;","outputs":1,"noerr":0,"x":920,"y":1500,"wires":[["2c10566f.0f4c9a"]]},{"id":"22f9058.917b37a","type":"debug","z":"ef630557.23093","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":570,"y":1540,"wires":[]},{"id":"e7a8ff58.ab3e1","type":"ui_template","z":"ef630557.23093","d":true,"group":"2b36a01a.8c13a","name":"ui_temlplate - present download links on dashboard","order":0,"width":0,"height":0,"format":"<form>\n<div >\n <a href=\"/download/output.csv\">download test.log</a>\n</div>\n</form>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":870,"y":1620,"wires":[["f666fa61.dcb228"]]},{"id":"1a66e9ca.1db66e","type":"comment","z":"ef630557.23093","name":"Create http endpoint <nodered>/files/xxx where xxx is the file name to download","info":"","x":580,"y":1340,"wires":[]},{"id":"87857222.4e7ff","type":"http in","z":"ef630557.23093","name":"","url":"ui/download/:fn","method":"get","upload":false,"swaggerDoc":"","x":490,"y":1420,"wires":[["af8c4555.1ff13"]]},{"id":"f666fa61.dcb228","type":"debug","z":"ef630557.23093","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":1210,"y":1620,"wires":[]},{"id":"b428c386.033728","type":"debug","z":"ef630557.23093","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":1270,"y":1740,"wires":[]},{"id":"3a30723d.4309f6","type":"ui_template","z":"ef630557.23093","group":"2b36a01a.8c13a","name":"ui_temlplate - present download links on dashboard","order":0,"width":0,"height":0,"format":"<form action = \"/download/test.log\" method = \"get\">\n <input type = \"submit\" value = \"Download Records\"\n name = \"Submit\" id = \"frm1_submit\" />\n</form>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":870,"y":1740,"wires":[[]]},{"id":"7a6f565f.be04b8","type":"comment","z":"ef630557.23093","name":"location of log in 192.168.13.8","info":"","x":1020,"y":1340,"wires":[]},{"id":"8376e88c.01b5c","type":"comment","z":"ef630557.23093","name":"link form","info":"","x":740,"y":1580,"wires":[]},{"id":"13ab8e66.944142","type":"comment","z":"ef630557.23093","name":"button form","info":"","x":750,"y":1700,"wires":[]},{"id":"2f996b8a.ba2a7c","type":"ui_template","z":"ef630557.23093","group":"2b36a01a.8c13a","name":"Download csv button","order":17,"width":0,"height":0,"format":"<form action = \"/download/output.csv\" method = \"get\">\n <button onclick=\"submit\">Download CSV</button>\n</form>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":780,"y":1800,"wires":[[]]},{"id":"2b36a01a.8c13a","type":"ui_group","z":"","name":"ONENet Query by Device","tab":"842ee1bc.352ac","order":1,"disp":true,"width":"4","collapse":false},{"id":"842ee1bc.352ac","type":"ui_tab","z":"","name":"Meter Details v1.52","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

```

i am apprecaite if someone can help me thanks~  
Jeff

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [14 August 2020 03:30 UTC](https://discourse.nodered.org/t/download-a-file-and-then-connection-lost/31541/2 "2020-08-14T03:30:45Z")

</div>

Hi,

regarding the browser refresh when you submit the form to download the file try to use :

```auto
event.preventDefault();

```

for example :

```auto
<a href="#" onclick="event.preventDefault(); myfunc({a:1, b:'hi'});" />click</a>

```

in your case in your **template node** try :

```auto
<button onclick="event.preventDefault(); submit">Download CSV</button>

```

---

<div class="post-metadata">

**Author:** ![apex](https://avatars.discourse-cdn.com/v4/letter/a/e56c9b/32.png) [@apex](https://discourse.nodered.org/u/apex)\
**Post date:** [14 August 2020 04:49 UTC](https://discourse.nodered.org/t/download-a-file-and-then-connection-lost/31541/3 "2020-08-14T04:49:34Z")

</div>

hi thanks for your reply,  
but the button become no response after following your code  
thanks

remarks, I GOOGLEED SOME HINTS provided by words but also no success  
my updated code was

```auto
<form action = "/download/output.csv" method = "get">
    <button onclick="my_button_click_handler">Download CSV</button>

</form>

<script>

function my_button_click_handler()
{
    alert('Button Clcked');
    event.preventDefault();
}
</script>

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [14 August 2020 05:34 UTC](https://discourse.nodered.org/t/download-a-file-and-then-connection-lost/31541/4 "2020-08-14T05:34:41Z")

</div>

What happens if you change the button back to an anchor? Or a standard html button?

My guess its because you are using a form and submit button.

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [14 August 2020 05:38 UTC](https://discourse.nodered.org/t/download-a-file-and-then-connection-lost/31541/5 "2020-08-14T05:38:16Z")

</div>

hmm .. maybe try :

```auto

<style>
.button {
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
}
</style>

<a href="/download/output.csv" download="Download CSV" class="button">Download CSV</a>

```

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [14 August 2020 05:42 UTC](https://discourse.nodered.org/t/download-a-file-and-then-connection-lost/31541/6 "2020-08-14T05:42:13Z")

</div>

> [@apex](#):
>
> ```auto
> function my_button_click_handler()
> {
> alert('Button Clcked');
> event.preventDefault();
> }
> </script>
> 
> ```

Reverse those statements:

```auto
event.preventDefault();
alert('Button Clcked');

```

---

<div class="post-metadata">

**Author:** ![apex](https://avatars.discourse-cdn.com/v4/letter/a/e56c9b/32.png) [@apex](https://discourse.nodered.org/u/apex)\
**Post date:** [14 August 2020 06:20 UTC](https://discourse.nodered.org/t/download-a-file-and-then-connection-lost/31541/7 "2020-08-14T06:20:23Z")

</div>

thanks  
this one seem work  
but can you explain to me why the Link method is ok ?  
but not the one in example?  
thanks

---

<div class="post-metadata">

**Author:** ![apex](https://avatars.discourse-cdn.com/v4/letter/a/e56c9b/32.png) [@apex](https://discourse.nodered.org/u/apex)\
**Post date:** [14 August 2020 06:20 UTC](https://discourse.nodered.org/t/download-a-file-and-then-connection-lost/31541/8 "2020-08-14T06:20:36Z")

</div>

i have try but with no success thanks~

And how can i know if the programm have really run into the function in node red?  
thanks Jeff

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [14 August 2020 07:44 UTC](https://discourse.nodered.org/t/download-a-file-and-then-connection-lost/31541/9 "2020-08-14T07:44:45Z")

</div>

> [@apex](#):
>
> but can you explain to me why the Link method is ok ?  
> but not the one in example?

because as Steve said you are using a form .. and i believe, forms always refresh when submitted  
We tried to **prevent** the refresh but i guess we prevented the download of the file aswel 🕶

so .. using an anchor tag save you the problems of having to deal with a form and with the magic of css we made the anchor tag look like a button

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [28 August 2020 07:44 UTC](https://discourse.nodered.org/t/download-a-file-and-then-connection-lost/31541/10 "2020-08-28T07:44:47Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.