Vuetify file upload - v-file-input

I wanted to understand how I can upload a file using Vuetify components. I was not really sure about entire concept how it should work, as the v-file-input only facilitates the UI part of it, and I was not sure how the upload would actually work. But I found the following example: https://codepen.io/scottorgan/pen/LYYgYga

I implemented this in a template node:

<template>
<v-container fill-height>
    <v-row justify="center">
        <v-col cols="auto">
            <v-card width="600" height="300" raised color="white">
                <v-card-title>Vuetify v-file-input Example:</v-card-title>
                <br>
                <v-card-text>
                    <v-file-input accept=".txt" label="Click here to select a .txt file" outlined v-model="chosenFile">
                    </v-file-input>
                </v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn right @click="importTxt">Read File</v-btn>
                </v-card-actions>
            </v-card>
        </v-col>
        <v-col cols="auto">
            <v-card width="600" height="300" raised color="white">
                <v-card-title>File contents:</v-card-title>
                <v-card-text>
                    <p>{{ data }}</p>
                </v-card-text>
            </v-card>
        </v-col>
    </v-row>
</v-container>
</template>

<script>
    export default {
        data() {
            // define variables available component-wide
            // (in <template> and component functions)
            return {
                chosenFile: null, // <- initialize the v-model prop 
                data: null
            }
        },
        watch: {
            // watch for any changes of "count"
        },
        computed: {
            // automatically compute this variable
            // whenever VueJS deems appropriate
        },
        methods: {
            // expose a method to our <template> and Vue Application
            importTxt() {
            
                if (!this.chosenFile) {
                    this.data = "No File Chosen";
                } else {
                    console.log("File selected");
                    console.log(this.chosenFile);
                    var reader = new FileReader();
                    
                    // Use the javascript reader object to load the contents
                    // of the file in the v-model prop
                    reader.readAsText(this.chosenFile);
                    reader.onload = () => {
                        this.data = reader.result;
                    }
                }

            }
        },
        mounted() {
            // code here when the component is first loaded
        },
        unmounted() {
            // code here when the component is removed from the Dashboard
            // i.e. when the user navigates away from the page
        }
    }
</script>

When I select a text file, I get an error:

I can see the file that I selected in the console log, that appears to be correct.
Is it just the case that the FileReader cannot be used in DB2? Based on this example, I assumed the DB2 implementation would be to read the file content and pass it on to Node-Red in a payload. Or this should be done in a different way?

If you add debugger statement in your function, you can clearly see that this.chosenFile is an array

image

FileReader is for a "file"

Adjust your code:

            importTxt() {
                console.log('import')
                if (!this.chosenFile) {
                    this.data = "No File Chosen";
                } else {
                    console.log("File selected");
                    console.log(this.chosenFile);
                    if (!this.chosenFile || this.chosenFile.length !== 1) {
                        console.warn('expected chosenFile to contain 1 item')
                        return
                    }
                    const reader = new FileReader();
                    
                    // Use the javascript reader object to load the contents
                    // of the file in the v-model prop
                    reader.readAsText(this.chosenFile[0]);
                    reader.onload = () => {
                        this.data = reader.result;
                    }
                }
            }

Demo:
chrome_03LhxuCGwh

Thanks. I could see in the console that it was an array, but since the codepen example did not handle that, I did not occur to me that I should do the same. Of course what would a FileReader do with an array of files...

Was my thinking OK saying that if I want to upload this file Node-Red server, I simple put the reader.result to teh payload and send it?

Ignore my last question, I think I got the hang of it.

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:
image

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.

1 Like

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