Upload a file from the Dashboard

Hi,

Can someone give me a hint, how i use the vuetifyjs file-inputs component in a template node?

I want to upload a file(csv,json,xlsx,pdf) via the dashboard and send the filecontent as a buffer or text.

How do i watch the component, so on file upload, a msg with the filecontent is emittet.

grafik

[{"id":"96743359434226b7","type":"ui-template","z":"9ba1555b4c052436","group":"","page":"","ui":"","name":"file-input","order":0,"width":0,"height":0,"head":"","format":"<template>\n      <v-file-input label=\"File input\"></v-file-input>\n</template>\n<script> \n    export default {\n        data() {\n            return {\n                buffer_data: 0\n            }\n        },\n        watch: {\n        },\n        computed: {\n        },\n        methods: {\n        },\n        mounted() {\n        },\n        unmounted() {\n        }\n    }\n</script>\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":340,"y":1040,"wires":[["b1f2bd6d2177affa"]]},{"id":"b1f2bd6d2177affa","type":"debug","z":"9ba1555b4c052436","name":"debug 120","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":530,"y":1040,"wires":[]}]

tryed:

<template>
      <v-file-input v-model="value" label="File input" @update:modelValue="send({payload: value})></v-file-input>
</template>
<template>
      <v-file-input label="File input" @update:modelValue="send({payload: modelValue})></v-file-input>
</template>

See this thread. Vuetify file upload - v-file-input - #2 by Steve-Mcl

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

I can't upload Files bigger than 1mb.

In the settings.js, i set apiMaxLength: '100mb',

I think the websocket conection drops and is then re-established

Node-red log:
30 May 12:52:36 - [info] [ui-base:test] Disconnected YpH8X4VhUw7UNa-bAAAC due to transport error

Do someone knows where this limit is comming from?
fail.txt (1.0 MB)
pass.txt (971.2 KB)

...

Found it:
add to settings.js:

    dashboard: {
       maxHttpBufferSize: 1e8 // size in bytes, example: 100 MB
    }

1 Like

Hello, I think I found a solution for the file size. I posted it : Vuetify file upload - v-file-input followup

Just to update here, we now have a file-upload example included in our documentation: UI Template Examples | Node-RED Dashboard 2.0

3 Likes