MattB's avatar
Level 2

Vue Image upload issue

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: '',
            },
0 likes
2 replies
James_Moore's avatar

Hey Matt just wondering if this v-card is wrapped in a <form> that is being submitted via a post request ? Or are you submitting a post request using axios ?

Please or to participate in this conversation.