Http file download cause dashboard connection lost

Did anybody have the similar issue? When download a file via http with the new dashboard version 3.0.4, it will cause an error of "connection lost". The connection will be lost for a few seconds and then it is back to normal. Did not see any warning in the debug window or debug terminal when this happened.

It worked well for version 2.3.0 and before. Did not have chance testing other versions yet.

Here is the test flow. You need to add a test file (named "test.csv" to the download directory.

[{"id":"5847b7aa62131d37","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"615a6ffd.f28aa","type":"function","z":"5847b7aa62131d37","name":"Set base path","func":"\nvar basePath = \"/home/pi/Documents/S0_data/\";\nvar filepath = '.node-red/public/test.csv';\n//get file name only & add it as the Content-Disposition header\nvar filename = filepath.split(\"/\").pop();\nmsg.headers = {\n    \"Content-Disposition\": `attachment; filename=\"${filename}\"`\n}\n\nif (!filename) {\n    msg.payload = \"No file specified\";\n    msg.statusCode = 404;//not found\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} 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\n\n//set msg.filename for the file in node\nmsg.filename = filepath;\n\n\n\nreturn [msg, null];//fire output 1\n\n\n","outputs":2,"noerr":0,"initialize":"","finalize":"","libs":[],"x":680,"y":460,"wires":[["66b84db9.a899d4"],["db65d67d.bbb078"]]},{"id":"db65d67d.bbb078","type":"http response","z":"5847b7aa62131d37","name":"","statusCode":"","headers":{},"x":910,"y":540,"wires":[]},{"id":"66b84db9.a899d4","type":"file in","z":"5847b7aa62131d37","name":"","filename":"","format":"","chunk":false,"sendError":false,"encoding":"none","x":910,"y":460,"wires":[["db65d67d.bbb078"]]},{"id":"98bbe24b.33931","type":"catch","z":"5847b7aa62131d37","name":"","scope":null,"uncaught":false,"x":480,"y":540,"wires":[["4e017f6.c2ae28","7b5c3dce.93b074"]]},{"id":"4e017f6.c2ae28","type":"function","z":"5847b7aa62131d37","name":"Set 404","func":"msg.payload = msg.error;\nmsg.statusCode = 404;//resource not found\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":660,"y":540,"wires":[["db65d67d.bbb078"]]},{"id":"7b5c3dce.93b074","type":"debug","z":"5847b7aa62131d37","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":490,"y":600,"wires":[]},{"id":"b2cc8c98.3f73a","type":"http in","z":"5847b7aa62131d37","name":"","url":"/report1","method":"get","upload":false,"swaggerDoc":"","x":490,"y":460,"wires":[["615a6ffd.f28aa"]]},{"id":"d4b6dd746b5cc216","type":"ui_template","z":"5847b7aa62131d37","group":"7342a9c1.956e78","name":"Download file","order":14,"width":"10","height":1,"format":"<head>\n<style>\n.button {\n    display: inline-block;\n    position: relative;\n    cursor: pointer;\n    height: 100%;\n    width: 100%;\n    line-height: 36px;\n    vertical-align: middle;\n    align-items: center;\n    text-align: center;\n    border-radius: 12px;\n    box-sizing: border-box;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    outline: none;\n    border: 0;\n    background: transparent;\n    color:var(--color-text-primary);\n    white-space: nowrap;\n    text-transform: uppercase;\n    font-weight: 500;\n    font-size: 14px;\n    font-style: inherit;\n    font-variant: inherit;\n    font-family: inherit;\n    text-decoration: none;\n    overflow: hidden;\n    transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);\n}\n</style>\n</head>\n<body>\n\n <a href=\"/report1\">\" class=\"button\">Download report</a>\n \n</body>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":740,"y":600,"wires":[[]]},{"id":"7342a9c1.956e78","type":"ui_group","name":"Gateway Configuration","tab":"a85d7057.ee98d","order":1,"disp":true,"width":"10","collapse":false},{"id":"a85d7057.ee98d","type":"ui_tab","name":"Gateway setup","icon":"computer","order":14,"disabled":false,"hidden":false}]

Well I did see it happen once, but I must ask why are you doing it this way? Why not use a ui-button in place of the http-in/http-out nodes?

Can you show how to use ui-button to download the file?

The codes followed the example flows here. Here is a simplified version that removes the http-in/http-out.
The connection lost bug still happens:

[{"id":"44c5fc7acebc0aad","type":"ui_template","z":"dadd1f0488c7cca0","group":"7342a9c1.956e78","name":"Download file","order":14,"width":"10","height":1,"format":"<head>\n<style>\n.button {\n    display: inline-block;\n    position: relative;\n    cursor: pointer;\n    height: 100%;\n    width: 100%;\n    line-height: 36px;\n    vertical-align: middle;\n    align-items: center;\n    text-align: center;\n    border-radius: 12px;\n    box-sizing: border-box;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    outline: none;\n    border: 0;\n    background: transparent;\n    color:var(--color-text-primary);\n    white-space: nowrap;\n    text-transform: uppercase;\n    font-weight: 500;\n    font-size: 14px;\n    font-style: inherit;\n    font-variant: inherit;\n    font-family: inherit;\n    text-decoration: none;\n    overflow: hidden;\n    transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);\n}\n</style>\n</head>\n<body>\n\n <a href='.node-red/public/test.csv' class=\"button\">Download report</a>\n \n</body>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":780,"y":660,"wires":[[]]},{"id":"7342a9c1.956e78","type":"ui_group","name":"Gateway Configuration","tab":"a85d7057.ee98d","order":1,"disp":true,"width":"10","collapse":false},{"id":"a85d7057.ee98d","type":"ui_tab","name":"Gateway setup","icon":"computer","order":14,"disabled":false,"hidden":false}]

Hello David .. i imported your flow and tested it also
(I had to change the paths a bit because my test system is Windows)
but didnt notice any disconnection issues with the 3.0.4 dashboard.

  1. How large is the file you are downloading? Does it take a while to be read and sent to the http out node?
  2. If you use the download tag in the a href does that fix the issue ?
    <a href="/report1" class="button" download>Download report</a>
    according to MDN

ps. It seems from your flow that you are downloading a single fixed path and name file ?
If yes then you dont need most of the code in the function, as that example flow code is mostly needed to use the filepath and filename dynamically from the http in url parameters.

2 Likes

Hello UnborN,

Thanks much for the solution. It worked beautifully.
Yes we are missing the "download" tag :rofl:
After adding it, everything is back to normal.

It has nothing to do with file size. Without the download tag, a small file will crash.

Somehow the dashboard version 2.3.0 ignores this error and it worked.

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