# Connection lost in uploading large files

**URL:** https://discourse.nodered.org/t/connection-lost-in-uploading-large-files/54562
**Category:** Dashboard
**Created:** [1 December 2021 11:31 UTC](https://discourse.nodered.org/t/connection-lost-in-uploading-large-files/54562 "2021-12-01T11:31:05Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![hanine](https://avatars.discourse-cdn.com/v4/letter/h/b4bc9f/32.png) [@hanine](https://discourse.nodered.org/u/hanine)
#### Post date: [1 December 2021 11:31 UTC](https://discourse.nodered.org/t/connection-lost-in-uploading-large-files/54562/1 "2021-12-01T11:31:05Z")

</div>

I always receive connection lost when trying to upload files bigger then 700MB when the code works perfectly with smaller files . I tried the upload\_mas\_filesize in the input tag in the template node and nothing changed I am new to node red so i couldn't understand the problem if anyone has faced the problem before can help me  
Thanks in advance.

---

<div class="post-metadata">

### Author: ![Giu-seppe](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/giu-seppe/32/40489_2.png) [@Giu-seppe](https://discourse.nodered.org/u/Giu-seppe)
#### Post date: [1 December 2021 13:54 UTC](https://discourse.nodered.org/t/connection-lost-in-uploading-large-files/54562/2 "2021-12-01T13:54:36Z")

</div>

Which node are you using to upload the files? node-red-contrib-ui-upload? if yes did you used also node-red-contrib-chunks-to-lines ?  
Can you give more info like an example flow and picture?

---

<div class="post-metadata">

### Author: ![hanine](https://avatars.discourse-cdn.com/v4/letter/h/b4bc9f/32.png) [@hanine](https://discourse.nodered.org/u/hanine)
#### Post date: [1 December 2021 14:01 UTC](https://discourse.nodered.org/t/connection-lost-in-uploading-large-files/54562/3 "2021-12-01T14:01:37Z")

</div>

I am using the input html tag here is the code for the dashboard template am then encoding the file to send it inside a HTTP put request body

```auto
[
    {
        "id": "c881b02b7b31fbf0",
        "type": "ui_template",
        "z": "64a9f9c7f717adab",
        "group": "ffb7763e.5afd68",
        "name": "upload html webpage",
        "order": 2,
        "width": "12",
        "height": "43",
        "format": "<!DOCTYPE html>\n<html>\n<head>\n <style>\n\n #myFile{\n margin-top : 2px;\n margin-bottom: 2px;\n }\n #reset{\n margin-top: 1em;\n margin-bottom:1em;\n }\n\n .List {\n margin-top : 2px;\n margin-bottom: 2px;\n height: 200px;\n overflow-y: scroll;\n }\n #donwload-link{\n margin-top : 2px;\n margin-bottom: 2px;\n }\n </style>\n</head>\n\n<body>\n\n <input type=\"file\" id=\"myFile\" webkitdirectory directory multiple max_file_size=\"4194304\" onchange=\"myFunction()\">\n <br><br><br>\n <md-button ng-click=\"send({input:action()})\">\n Click to send the files\n </md-button>\n <button id=\"reset\" type=\"submit\" onClick=\"refreshPage()\">Reset</button>\n\n <div style=\"color:red; font-size:2em;\" id=\"waiting\" ></div>\n <ul class=\"List\" id=\"pathList\"></ul>\n <br>\n \n <script>\n var result = {};\n \n function myFunction() {\n\n var myFile = document.getElementById('myFile');\n console.log(\"myFile :\"+ myFile);\n var pathList = document.getElementById('pathList');\n console.log(\"pathList :\"+ pathList);\n let files = document.querySelector('input[type=file]').files;\n \n console.log(\"files :\"+ files);\n function removeAllChildNodes(parent) {\n while (parent.firstChild) {\n parent.removeChild(parent.firstChild);\n }\n }\n\n removeAllChildNodes(pathList);\n pathList.innerHTML = \"<h3>the selected files are<h3>\";\n [...files].forEach((file, index) => {\n let path = document.createElement('li');\n path.innerHTML = file.name;\n pathList.appendChild(path);\n });\n\n function readAndPreview(file) {\n\n var reader = new FileReader();\n\n reader.addEventListener(\"load\", function () {\n var b64 = reader.result.replace(/^data:.+;base64,/, '');\n //let file_name = file.name;\n result[file.name] = b64;\n console.log(\"######\" + file.name + \"######\");\n //console.log(b64);\n }, false);\n\n reader.readAsDataURL(file);\n }\n\n if (files) {\n [].forEach.call(files, readAndPreview);\n }\n }\n \n (function(scope) {\n scope.$watch('msg.payload', function(data) {\n content = data.formatinfo;\n datentime = data.dataandtime\n console.log(\"before ....data.doneprocessing in\" + data.doneprocessing );\n console.log(\"data.doneprocessing: \" + data.info);\n if(data.doneprocessing){\n console.log(\"data.doneprocessing in\" + data.doneprocessing );\n document.getElementById('waiting').setAttribute(\"style\", \"color:green; font-size:2em;\")\n document.getElementById('waiting').innerHTML = \"requested\"; \n document.getElementById('info').innerHTML = data.info;\n document.getElementById('donwload-link').innerHTML = \"click to download the log report\"; \n }\n });\n })(scope);\n\n\n this.scope.action = function () {\n let files = document.querySelector('input[type=file]').files;\n if(files.length==0){\n alert(\"select the files\")\n document.getElementById('info').innerHTML = \"\";\n document.getElementById('donwload-link').innerHTML = \"\";\n return {\"invalid\":\"none\"};\n }\n document.getElementById('info').innerHTML = \"\";\n document.getElementById('donwload-link').innerHTML = \"\";\n document.getElementById('waiting').setAttribute(\"style\", \"color:red; font-size:2em;\")\n document.getElementById('waiting').innerHTML = \"requesting...\";\n console.log(result);\n return result;\n }\n \n function downloadreport(){\n let index = \n download(content, `viz_log_${datentime}`, \"txt\");\n }\n \n function download(content, fileName, fileType){\n var link = document.getElementById(\"donwload-link\");\n var file = new Blob([content], {type: \"txt\"});\n var donwloadFile = fileName + \".\" + fileType;\n link.href = URL.createObjectURL(file);\n link.download = donwloadFile\n }\n \n function refreshPage()\n {\n window.location.reload();\n } \n </script>\n \n <div class=\"List\" id=\"info\"></div> \n <a href =\"#\" id=\"donwload-link\" onClick=\"downloadreport()\"></a>\n \n</body>\n\n</html>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 280,
        "y": 320,
        "wires": [
            [
                "1736b8eafc33579b"
            ]
        ]
    },
    {
        "id": "ffb7763e.5afd68",
        "type": "ui_group",
        "name": "Home",
        "tab": "ba3634a0fa711e8c",
        "order": 1,
        "disp": true,
        "width": "12",
        "collapse": false,
        "className": ""
    },
    {
        "id": "ba3634a0fa711e8c",
        "type": "ui_tab",
        "name": "Home",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

```

---

<div class="post-metadata">

### Author: ![hanine](https://avatars.discourse-cdn.com/v4/letter/h/b4bc9f/32.png) [@hanine](https://discourse.nodered.org/u/hanine)
#### Post date: [3 December 2021 15:19 UTC](https://discourse.nodered.org/t/connection-lost-in-uploading-large-files/54562/4 "2021-12-03T15:19:13Z")

</div>

the solution is to divide files to chunks when reading them in the template node.

---

<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: [17 December 2021 15:19 UTC](https://discourse.nodered.org/t/connection-lost-in-uploading-large-files/54562/5 "2021-12-17T15:19:25Z")

</div>

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