File upload in vuetify [closed]

javascript frameworks vue.js vuetify.js

Vue JS do not have file-input feature till today, so you can tweak v-text-field to work like image input field. The concept is, create an file input field and then hide it using css, and add an event in v-text-field to trigger that specific file input field to upload image. I have attached snippet please do play with that, and I also do have a fiddle created using vue and vuetify, visit here. Thanks!

new Vue({  el: '#app',  data: () => ({    title: "Image Upload",    dialog: false,    imageName: '',    imageUrl: '',    imageFile: ''  }),  methods: {    pickFile() {      this.$refs.image.click()    },    onFilePicked(e) {      const files = e.target.files      if (files[0] !== undefined) {        this.imageName = files[0].name        if (this.imageName.lastIndexOf('.') <= 0) {          return        }        const fr = new FileReader()        fr.readAsDataURL(files[0])        fr.addEventListener('load', () => {          this.imageUrl = fr.result          this.imageFile = files[0] // this is an image file that can be sent to server...        })      } else {        this.imageName = ''        this.imageFile = ''        this.imageUrl = ''      }    }  }})

<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet"><link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"><div id="app">  <v-app>    <v-toolbar dark color="primary">      <v-toolbar-side-icon></v-toolbar-side-icon>      <v-toolbar-title class="white--text">{{ title }}</v-toolbar-title>      <v-spacer></v-spacer>      <v-btn icon @click="dialog = !dialog">        <v-icon>link</v-icon>      </v-btn>    </v-toolbar>    <v-content>      <v-container fluid>        <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">          <img :src="imageUrl" height="150" v-if="imageUrl"/>          <v-text-field label="Select Image" @click='pickFile' v-model='imageName' prepend-icon='attach_file'></v-text-field>          <input            type="file"            style="display: none"            ref="image"            accept="image/*"            @change="onFilePicked"          >        </v-flex>        <v-dialog v-model="dialog" max-width="290">          <v-card>            <v-card-title class="headline">Hello World!</v-card-title>            <v-card-text>              Image Upload Script in VUE JS              <hr>              Yubaraj Shrestha              <br>http://yubarajshrestha.com.np/            </v-card-text>            <v-card-actions>              <v-spacer></v-spacer>              <v-btn color="green darken-1" flat="flat" @click.native="dialog = false">Close</v-btn>            </v-card-actions>          </v-card>        </v-dialog>      </v-container>    </v-content>  </v-app></div><script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>

Expand snippet