Preview image before its uploaded using vuetify "<v-file-input>"?

Question

This is what I have right now

      <v-file-input
            v-model="image"
            type="file"
            class="input"
            label="Upload license"
            hint="Add a picture of youre license"
            outlined
            dense
            @change="onFileChange"
          />

          <v-img :src="image" />

Just so you know, I know how to do this with the "", it kinda looks like this:

createImage (file) {
  const image = new Image()
  const reader = new FileReader()
  const vm = this

  reader.onload = (e) => {
    vm.image = e.target.result
    console.log(vm.image)
  }
  reader.readAsDataURL(file)
   },        
 onFileChange (e) {
  const files = e.target.files || e.dataTransfer.files
  if (!files.length) { return }
  this.createImage(files[0])
},

and just call to onFileChange on the input tag like @change="onFileChange"

can you add createImage function?

michael
– michael

2020-11-14 08:01:59 +00:00
Commented Nov 14, 2020 at 8:01 — michael
– michael, Commented Nov 14, 2020 at 8:01

onurelibol · Accepted Answer · 2020-11-16 23:00:42Z

<v-file-input> returns the file(s) itself on @change event unlike the native <input type="file" />. So in that case e.target.files does not exist there, e is the file itself. Also I would recommend not to share image for both v-file-input and v-img. v-img expects an url and v-file-input expects a file. Instead, I would recommend splitting it to 2 different variables like image and imageUrl.

Below you can see an example:

<v-file-input v-model="image" outlined dense @change="onFileChange" />
<v-img :src="imageUrl" />

data() {
  return {
    image: undefined,
    // to save image url
    imageUrl: ""
  };
},
methods: {
  createImage(file) {
    const reader = new FileReader();

    reader.onload = e => {
      this.imageUrl = e.target.result;
    };
    reader.readAsDataURL(file);
  },
  onFileChange(file) {
    if (!file) {
      return;
    }
    this.createImage(file);
  }
}

Here is a working example: https://codepen.io/onelly/pen/xxOBJjL

michael · Accepted Answer · 2020-11-14 02:28:56Z

0

Not sure if you're doing right. You've created object url on this.url, so you should use it instead of image as src value of img tag.

<v-img :src="url" />

answered Nov 14, 2020 at 2:28

michael

4,1733 gold badges15 silver badges31 bronze badges

1 Comment

Adam Muse Over a year ago

oh oops.. Thanks for pointing that out I posted the wrong code, it was kinda close. Its updated now

Collectives™ on Stack Overflow

Preview image before its uploaded using vuetify "<v-file-input>"?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related