dashboard_2_upload.json

[{"id":"3d6a530bee70b759","type":"comment","z":"0e3249ddee2000e3","name":"File Upload","info":"","x":750,"y":1120,"wires":[]},{"id":"fe54c8f7f92cad86","type":"ui-template","z":"0e3249ddee2000e3","group":"9db4a0bf77aaee5a","page":"","ui":"","name":"File Reader","order":0,"width":0,"height":0,"head":"","format":"<template>\n<v-container fill-height>\n    <v-row justify=\"center\">\n        <v-col cols=\"auto\">\n            <v-card width=\"600\" height=\"300\" raised color=\"white\">\n                <v-card-title>Vuetify v-file-input Example:</v-card-title>\n                <br>\n                <v-card-text>\n                    <v-file-input accept=\".txt\" label=\"Click here to select a .txt file\" outlined v-model=\"chosenFile\">\n                    </v-file-input>\n                </v-card-text>\n                <v-card-actions>\n                    <v-spacer></v-spacer>\n                    <v-btn right @click=\"importTxt\">Read File</v-btn>\n                </v-card-actions>\n            </v-card>\n        </v-col>\n        <v-col cols=\"auto\">\n            <v-card width=\"600\" height=\"300\" raised color=\"white\">\n                <v-card-title>File contents:</v-card-title>\n                <v-card-text>\n                    <p>{{ data }}</p>\n                </v-card-text>\n            </v-card>\n        </v-col>\n    </v-row>\n</v-container>\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                chosenFile: null, // <- initialize the v-model prop \n                data: null\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            importTxt() {\n            \n                if (!this.chosenFile) {\n                    this.data = \"No File Chosen\";\n                } else {\n                    console.log(\"File selected\");\n                    console.log(this.chosenFile);\n                    if (!this.chosenFile || this.chosenFile.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.readAsText(this.chosenFile[0]);\n                    reader.onload = () => {\n                    this.data = reader.result;\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":850,"y":1180,"wires":[[]]},{"id":"80601e48e5502f65","type":"ui-template","z":"0e3249ddee2000e3","group":"a28cf33ed5d5eee0","page":"","ui":"","name":"Text 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 text 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        </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 // <- 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.readAsText(this.uploadFile[0]);\n                    reader.onload = () => {\n                        // this.data = reader.result;\n                        this.send({topic:\"upload\", payload: reader.result, file:{name: this.uploadFile[0].name, size: this.uploadFile[0].size, type: this.uploadFile[0].type }  });\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":860,"y":1220,"wires":[["e50d2b01fa61ed1f"]]},{"id":"e50d2b01fa61ed1f","type":"debug","z":"0e3249ddee2000e3","name":"debug 364","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1130,"y":1220,"wires":[]},{"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            <v-progress-linear v-model=\"progress\" height=\"25\" :color=\"progresscolor\">\n                <strong>{{ progresstext }}</strong>\n            </v-progress-linear>\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,\n                progresstext: \"Select a file and click Upload File\",\n                progresscolor: \"light-blue\"\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                    if (!this.uploadFile || this.uploadFile.length !== 1) {\n                        console.warn('expected uploadFile 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.onloadstart = () => {\n                        this.progresscolor = \"light-blue\";\n                        this.progress = 0;\n                        this.progresstext = \"0%\";\n                    };\n                    reader.onerror = (data) => {\n                        this.progresscolor = \"red\";\n                        this.progress = 0;\n                        this.progresstext = \"Failed: \" + data.target.error.name;\n                    };\n                    reader.onabort = (data) => {\n                        this.progresscolor = \"red\";\n                        this.progress = 0;\n                        this.progresstext = \"Aborted\";\n                    };\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                        this.progresstext = \"Uploaded successfully\";\n                    };\n                    reader.onprogress = (data) => {\n                        this.progress = parseInt( ((data.loaded / data.total) * 100), 10 );\n                        this.progresstext = this.progress + \"%\";\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":"0ee78de6207066ea","type":"ui-template","z":"0e3249ddee2000e3","group":"f307cda67c610ff0","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/files\" show-size chips multiple counter v-model=\"uploadFile\">\n            </v-file-input>\n        </v-card-text>\n        <v-card-actions>\n            <v-spacer></v-spacer>\n            <v-btn right @click=\"startUpload\">Upload Files</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 // <- 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 === 0) {\n                        console.warn('No files selected')\n                        return\n                    }\n                    let total = this.uploadFile.length; \n                    let loaded = 0;\n                    for (let file of this.uploadFile) {\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(file);\n                        reader.onload = () => {\n                            // this.data = reader.result;\n                            loaded++;\n                            this.send({topic:\"upload\", payload: file, file:{name: file.name, size: file.size, type: file.type }  });\n                            if (loaded === total){\n                                // uploadComplete();\n                            }\n                        }\n                        reader.onprogress = (data) => {\n                            // this.progress = data.loaded;\n                        }\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":1340,"wires":[["f00fa14cab08d601","d937312e28dc9402"]]},{"id":"d937312e28dc9402","type":"debug","z":"0e3249ddee2000e3","name":"debug 366","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1130,"y":1340,"wires":[]},{"id":"9db4a0bf77aaee5a","type":"ui-group","name":"File Reader","page":"dd8d2662278f4f72","width":"6","height":"1","order":-1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"a28cf33ed5d5eee0","type":"ui-group","name":"File Upload","page":"dd8d2662278f4f72","width":"6","height":"1","order":-1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"44010f4b04014d29","type":"ui-group","name":"Binary Upload","page":"dd8d2662278f4f72","width":"6","height":"1","order":-1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"f307cda67c610ff0","type":"ui-group","name":"Multi 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"}}]