MattB
7 months ago
1349
2
Vue

Vue Image upload issue

Posted 7 months ago by MattB

I'm using vuetifiy's file upload input to handle file uploads. My form is this:

<v-card-text>
                            <v-container>
                                <v-row>
                                    <v-col cols="12" sm="6" md="6">
                                        <v-text-field label="Image Title" v-model="editedItem.name" single-line></v-text-field>
                                    </v-col>
                                    <v-col cols="12" sm="6" md="6">
                                        <v-select :items="species" v-model="editedItem.species" label="Species"></v-select>
                                    </v-col>
                                </v-row>
                                <v-row>
                                    <v-col cols="12" sm="6" md="6">
                                        <v-file-input v-model="editedItem.image" label="Picture"></v-file-input>
                                    </v-col>
                                    <v-col cols="12" sm="6" md="6">
                                        <v-file-input v-model="editedItem.thumbnail" label="Thumbnail"></v-file-input>
                                    </v-col>
                                </v-row>                              
                            </v-container>
                        </v-card-text>

Every field except the 2 file upload links works fine. In the console, I get errors such as this:

TypeError: Cannot read property 'files' of undefined

and others saying the file is undefined. Have I done something wrong with the v-model part? The edited item is as such:

 editedItem: {
                name: '',
                image: '',
                thumbnail: '',
                species: '',                
                action: '',
            },

Please sign in or create an account to participate in this conversation.