# Vuetify file upload - v-file-input

**URL:** <https://discourse.nodered.org/t/vuetify-file-upload-v-file-input/86087>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [3 March 2024 10:40 UTC](https://discourse.nodered.org/t/vuetify-file-upload-v-file-input/86087 "2024-03-03T10:40:12Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)\
**Post date:** [3 March 2024 10:40 UTC](https://discourse.nodered.org/t/vuetify-file-upload-v-file-input/86087/1 "2024-03-03T10:40:12Z")

</div>

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](https://codepen.io/scottorgan/pen/LYYgYga)

I implemented this in a template node:

```auto
<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:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/e/4ea83868a769fbdad5cf2e4adc3a852976c7e7bd.png)

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?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [3 March 2024 12:27 UTC](https://discourse.nodered.org/t/vuetify-file-upload-v-file-input/86087/2 "2024-03-03T12:27:06Z")

</div>

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

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/2/720999702ecfa1924d8c509950500817252dc2a8.png)

FileReader is for a "file"

Adjust your code:

```auto
            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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/9/a919a362d9ca8e16e62a273c70e441b2b88765a3.gif)

---

<div class="post-metadata">

**Author:** ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)\
**Post date:** [3 March 2024 17:56 UTC](https://discourse.nodered.org/t/vuetify-file-upload-v-file-input/86087/3 "2024-03-03T17:56:25Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)\
**Post date:** [3 March 2024 21:48 UTC](https://discourse.nodered.org/t/vuetify-file-upload-v-file-input/86087/4 "2024-03-03T21:48:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)\
**Post date:** [6 March 2024 20:40 UTC](https://discourse.nodered.org/t/vuetify-file-upload-v-file-input/86087/5 "2024-03-06T20:40:06Z")

</div>

I created this very simple template node that allows me to upload a file to my home folder.

```auto
[{"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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/5/e5bd6c0a5221ebb9e5ffdad3a1bba82f3d292503.png)

I tried googleing it, it is something related to [socket.io](http://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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [5 April 2024 20:40 UTC](https://discourse.nodered.org/t/vuetify-file-upload-v-file-input/86087/6 "2024-04-05T20:40:36Z")

</div>

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