File input on change in vue.js

javascript vue.js vuejs2 vue-component

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?

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/…

oboshto

Another solution:

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

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

Ikbel

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
  }
}

Mike Mitterer

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

<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)

File input on change in vue.js

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US