How to store FileList object inside Vue data

Question

Hello im trying to store a FileList object inside vue data object but it's being stored as string "File"

Im adding a ref to html like this

<input type="file" @change="fileChange($event.target)">

And in the javascript

new Vue({
   el: '#someEl',
   data: {
      file: null
   },
   methods: {
      fileChange (file) {
        this.file = file.files[0]
      }
   }
})

As a result i get this:

this.file=e.target.files[0] & @change="fileChange($event)" should work — Helping hand
– Helping hand, Commented Aug 24, 2018 at 17:17
Don't know vue, nor this console output, but are you sure this is a string? That would be a really strange string output ([object File] would be more expected here). Also, notpicking, but it is a File objevt you are trying to store here. The FileList is the object above. — Kaiido
– Kaiido, Commented Aug 25, 2018 at 10:03
@Helpinghand that didn't work either :( it is still stored as [object File] — Madtin
– Madtin, Commented Aug 27, 2018 at 8:59
@Kaiido yes It's stored as [object File] when I double click it. the console Its because It's the vue developer tools. — Madtin
– Madtin, Commented Aug 27, 2018 at 8:59

Helping hand · Accepted Answer · 2018-08-27 17:43:46Z

2

You need to just pass argument $event to fileChange() instead of $event.target.
Now you can access file object using evt.target.files[0]; inside fileChange() function.

var vm = new Vue({
    el: '#app',
    data: {
      file: {}
   },
   methods: {
      fileChange (evt) {
        this.file = evt.target.files[0];
        console.log('file Object:==>',this.file);
      }
   }
    
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js" type="text/javascript"></script>

<div id="app">				

  
  <p>
   <input type="file" @change="fileChange($event)">
   name: <b>{{file.name}}</b>
  </p>
  <p>
    size: <b>{{file.size}} </b> 
    & type: <b>{{file.type}}</b>
  </p>
</div>

answered Aug 27, 2018 at 17:43

Helping hand

2,9602 gold badges21 silver badges33 bronze badges

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

Collectives™ on Stack Overflow

How to store FileList object inside Vue data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related