CODEWITHSUNDEEP
vue.jsfile-uploadvuetify.js
Baspa
Baspa

Reputation: 1168

Vuetify File upload

I have a form where I use the Vuetify v-file-input component:

  <v-file-input chips multiple label="File(s)" v-model="file.files"></v-file-input>

My data object looks like this:

 data: () => ({
    file: {
      files: null,
      directory: 0,
    }
 })

When I console.log the form data the files object returns an empty object. How can I get the file data to pass it to my Laravel back-end?

Upvotes: 0

Views: 4031

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362370

Use a the change event and a FileReader ...

   <v-file-input chips multiple @change="addFiles()" 
          label="File(s)" v-model="file.files"></v-file-input>

   methods: {
        addFiles(){
            this.files.forEach((file, f) => {

                this.readers[f] = new FileReader();
                this.readers[f].onloadend = (e) => {

                    let fileData = this.readers[f].result
                    let imgRef = this.$refs.file[f]
                    imgRef.src = fileData
                    console.log(fileData)

                    // send to server here...
                }

                this.readers[f].readAsDataURL(this.files[f]);
            })
        },
    },

Demo: https://codeply.com/p/1K7sf12k0k

Upvotes: 1

Related Questions