How to get file object using v-file-input in Nuxt.js?

Question

I have used Vuetify.js as Nuxt.Js's UI framework. I wanted to get file object when I input file my apps. So I used v-file-input component in Vuetify.Js and I made code like below.

    <template>
    <div>
        <v-file-input
            label="fileinput"
            multiple
            v-model="files"
            @change="getFileObject()"></v-file-input>    
    </div>    
</template>
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'

@Component({})
export default class extends Vue{
    files:any = []
    fileObj:any = {}
    async getFileObject(file:any){
        this.fileObj = await file
        console.log(this.fileObj)
    }
}
</script>

I checked the file object using console.log. but 'this.fileObj' is undefined. How do I get file object when I input files? Could anyone advise me?

Take a look here: stackoverflow.com/questions/44989162/file-upload-in-vuetify — Ballon Ura
– Ballon Ura, Commented Dec 7, 2020 at 20:31

Dan · Accepted Answer · 2020-12-07 20:33:44Z

2

If you remove the empty argument from the handler, it should be passed implicitly. It should also be on this.files which is used as the input's v-model:

@change="getFileObject"

methods: {
  getFileObject(file:any) {
    console.log(file);
    console.log(this.files)
  }
}

answered Dec 7, 2020 at 20:33

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Boussadjra Brahim · Accepted Answer · 2020-12-07 20:40:59Z

1

@change event has one parameter which the files array :

  @change="getFileObject($event)"></v-file-input>

then in script:

     async getFileObject(files:File[]){
         this.fileObj = await files
        console.log(this.fileObj)
     }

answered Dec 7, 2020 at 20:40

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

4 Comments

drunkdolphin Over a year ago

Thanks a lot for your answer! I realized I need to put one parameter in event-handler like your answer.

drunkdolphin Over a year ago

Thank you so much!

Boussadjra Brahim Over a year ago

you're welcome, @change="getFileObject($event)" allows you to pass other parameters if you want, and files:File[] enforces the typing

drunkdolphin Over a year ago

I wanted to write like TypeScript to enforce the typing, but I didn't have any ideas to file object. I really understand. Thanks a lot!

Collectives™ on Stack Overflow

How to get file object using v-file-input in Nuxt.js?

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related