File upload in vuetify [closed]

Question

I'm using Vuetify.js components for my front-end in Vue.js and want to create a user registration form with file upload. I'm able to create the form using v-text-field (a Vuetify component).

• How can I upload the file that is selected (input)?
• Which component should I use or is there any other alternative way?

Answer 1

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>

Latest version (V2.0.5) while editing this post dated Aug 11, 2019, there's a dedicated file input option. Please follow the link below for official documentation: https://vuetifyjs.com/en/components/file-inputs.

Answer 2

An easy trick is:

<v-btn color="success" @click="$refs.inputUpload.click()">Success</v-btn> <input v-show="false" ref="inputUpload" type="file" @change="yourFunction" > 

Just create an input with the following properties:

• type=file
• ref=inputUpload this works like an id, you could name it like you want
• v-show=false this hides input

Then make a button that when you click it, it fires a click event on the input Upload Button.