Download a file and then connection lost

General
1

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

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

[{"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

2

Hi,

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

event.preventDefault();

for example :

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

in your case in your template node try :

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

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

<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>
4

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.

5

hmm .. maybe try :


<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>
6

Reverse those statements:

event.preventDefault();
alert('Button Clcked');
7

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

8

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

9

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 :sunglasses:

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

2 Likes
10

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