Upload a file from the Dashboard

ah missed that topic on search, sorry.

I just made a little adjustment: The chosenFile/uploadedFile is not an array, so i change uploadedFile[0] to uploadedFile. And then convert the buffer to a string for importing text files.

Thank you for your help :slight_smile:

grafik

[{"id":"ac0d56d388a4daa4","type":"ui-template","z":"9ba1555b4c052436","group":"","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) {\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);\n                    reader.onload = () => {\n                        // this.data = reader.result;\n                        this.send({topic:\"upload\", payload: this.uploadFile, file:{name: this.uploadFile.name, size: this.uploadFile.size, type: this.uploadFile.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":1070,"y":1320,"wires":[["7c2cc0e98edc2535"]]},{"id":"df9661cfece5ac80","type":"debug","z":"9ba1555b4c052436","name":"debug 365","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1550,"y":1320,"wires":[]},{"id":"7c2cc0e98edc2535","type":"function","z":"9ba1555b4c052436","name":"buffer2string","func":"msg.payload = msg.payload.toString()\nreturn msg;\n","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":1310,"y":1320,"wires":[["df9661cfece5ac80"]]}]
1 Like