File input on change in vue.js

Question

Using plain HTML/JS, it is possible to view the JavaScript File objects of selected files for an input element like so:

<input type="file" id="input" multiple onchange="handleFiles(this.files)">

However, when converting it to the 'Vue' way it doesn't seem to work as intend and simply returns undefined instead of returning an Array of File objects.

This is how it looks in my Vue template:

<input type="file" id="file" class="custom-file-input" 
  v-on:change="previewFiles(this.files)" multiple>

Where the previewFiles function is simply the following (located in methods):

  methods: {
    previewFiles: function(files) {
      console.log(files)
    }
  }

Is there an alternate/correct way of doing this? Thanks

What do you expect this.files to point to in your Vue example? — David L
– David L, Commented Jul 19, 2017 at 0:21
this.files should be an Array of File objects, as it is in the pure HTML example, as seen here - developer.mozilla.org/en-US/docs/… — Ash
– Ash, Commented Jul 19, 2017 at 0:24

oboshto · Accepted Answer · 2018-06-17 21:59:18Z

180

Another solution:

<input type="file" @change="previewFiles" multiple>

methods: {
   previewFiles(event) {
      console.log(event.target.files);
   }
}

answered Jun 17, 2018 at 21:59

oboshto

3,6574 gold badges27 silver badges25 bronze badges

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

1 Comment

user956584 Over a year ago

event is undefined in firefox

Ikbel · Accepted Answer · 2017-07-19 00:25:34Z

83

Try this.

<input type="file" id="file" ref="myFiles" class="custom-file-input" 
  @change="previewFiles" multiple>

and in your component options:

data() {
  return {
    files: [],
  }
},
methods: {
  previewFiles() {
    this.files = this.$refs.myFiles.files
  }
}

answered Jul 19, 2017 at 0:25

Ikbel

7,8513 gold badges36 silver badges46 bronze badges

Comments

Mike Mitterer · Accepted Answer · 2019-12-18 10:22:02Z

For all the TS-Users out there:

<template>
<input ref="upload"
       type="file"
       name="file-upload"
       multiple=""
       accept="image/jpeg, image/png"
       @change="onUploadFiles">
</template>

import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({ components: {} })
export default class MediaEdit extends Vue {

private onUploadFiles(event: InputEvent): void {
    const files: ReadonlyArray<File> = [...(this.upload.files ? this.upload.files : [])];

        files.forEach((file) => {
            console.log(`File: ${file.name}`);
        });
    }

    /** Upload element */
    private get upload(): HTMLInputElement {
        return this.$refs.upload as HTMLInputElement;
    }
}

vovchisko · Accepted Answer · 2019-12-05 16:18:45Z

5

<form ref="form">
   <input type="file" @change="previewFiles" multiple tabindex="-1">
</form>

methods: {
   previewFiles(event) {

      // process your files, read as DataUrl or upload...
      console.log(event.target.files);

      // if you need to re-use field or drop the same files multiple times
      this.$refs.form.reset() 

   }
}

On Safari, you might face an issue when @input/change event won't fire.

tabindex="-1" - it's a magic trick to make it works on Safari (13.0.2)

answered Dec 5, 2019 at 16:18

vovchisko

2,2971 gold badge24 silver badges29 bronze badges

Collectives™ on Stack Overflow

File input on change in vue.js

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related