I created this very simple template node that allows me to upload a file to my home folder.
[{"id":"dd7321d7195337c9","type":"ui-template","z":"0e3249ddee2000e3","group":"44010f4b04014d29","page":"","ui":"","name":"Binary File Upload","order":0,"width":0,"height":0,"head":"","format":"<template>\n <v-card width=\"600\" height=\"300\" raised color=\"white\">\n <v-card-title>Upload binary file to Node-Red</v-card-title>\n <br>\n <v-card-text>\n <v-file-input label=\"Click here to select a file\" show-size v-model=\"uploadFile\">\n </v-file-input>\n <div>Progress: {{ progress }} bytes loaded</div>\n </v-card-text>\n <v-card-actions>\n <v-spacer></v-spacer>\n <v-btn right @click=\"startUpload\">Upload File</v-btn>\n </v-card-actions>\n </v-card>\n</template>\n\n<script>\n export default {\n data() {\n // define variables available component-wide\n // (in <template> and component functions)\n return {\n uploadFile: null,\n progress: 0 // <- initialize the v-model prop \n }\n },\n watch: {\n // watch for any changes of \"count\"\n },\n computed: {\n // automatically compute this variable\n // whenever VueJS deems appropriate\n },\n methods: {\n // expose a method to our <template> and Vue Application\n startUpload() {\n // debugger;\n if (!this.uploadFile) {\n return;\n } else {\n console.log(\"File selected\");\n console.log(this.uploadFile);\n if (!this.uploadFile || this.uploadFile.length !== 1) {\n console.warn('expected chosenFile to contain 1 item')\n return\n }\n const reader = new FileReader();\n \n // Use the javascript reader object to load the contents\n // of the file in the v-model prop\n reader.readAsArrayBuffer(this.uploadFile[0]);\n reader.onload = () => {\n // this.data = reader.result;\n this.send({topic:\"upload\", payload: this.uploadFile[0], file:{name: this.uploadFile[0].name, size: this.uploadFile[0].size, type: this.uploadFile[0].type } });\n }\n reader.onprogress = (data) => {\n this.progress = data.loaded;\n }\n }\n\n }\n },\n mounted() {\n // code here when the component is first loaded\n },\n unmounted() {\n // code here when the component is removed from the Dashboard\n // i.e. when the user navigates away from the page\n }\n }\n</script>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":870,"y":1260,"wires":[["e8cbb24ea5811b9b","f00fa14cab08d601"]]},{"id":"e8cbb24ea5811b9b","type":"debug","z":"0e3249ddee2000e3","name":"debug 365","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1130,"y":1260,"wires":[]},{"id":"d93047d6fa11a1c8","type":"file","z":"0e3249ddee2000e3","name":"","filename":"filename","filenameType":"msg","appendNewline":true,"createDir":false,"overwriteFile":"true","encoding":"none","x":1360,"y":1300,"wires":[[]]},{"id":"f00fa14cab08d601","type":"change","z":"0e3249ddee2000e3","name":"","rules":[{"t":"set","p":"filename","pt":"msg","to":"\"/home/nygma/\" & msg.file.name","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":1150,"y":1300,"wires":[["d93047d6fa11a1c8"]]},{"id":"44010f4b04014d29","type":"ui-group","name":"Binary Upload","page":"dd8d2662278f4f72","width":"6","height":"1","order":-1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"dd8d2662278f4f72","type":"ui-page","name":"Data Entry New","ui":"cb79bc4520925e32","path":"/entry","icon":"note-multiple","layout":"grid","theme":"0d92c765bfad87e6","order":-1,"className":"","visible":"true","disabled":"false"},{"id":"cb79bc4520925e32","type":"ui-base","name":"My UI","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false},{"id":"0d92c765bfad87e6","type":"ui-theme","name":"Basic Blue Theme","colors":{"surface":"#4d58ff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
If you test this, update the path in the change node.
The flow works just fine as long as the files are small. Anything above 1 MB and I never get to the part when the file is sent as a message. And I notice these two messages in the console:
I tried googleing it, it is something related to socket.io. I guess I can't really do much about it. If you test my flow, the progress seems to update up-to the full file size therefore I guess the client can read the entire file, but it is not able to send it back to Node-Red.
