Upload file to vuetify

Question

I am using vuetify components for front-end in Vuejs. I want to create a user registration form with a file upload. I can create a form using v-text-field in vuetify, but how to upload a file. Which component to use or in any other alternative way.

Answer 1

Vue JS still does not have a file input function, so you can configure the v-text-field to work as an image input field. The idea is to create a file input field and then hide it using css and add an event to the v-text-field to trigger a specific file input field to load the image. I added a snippet, please play around with it, and I also have a violin 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> 

The latest version (V2.0.5) when editing this post is dated August 11, 2019, there was a dedicated file entry option. Please follow the link below for official documentation: https://vuetifyjs.com/en/components/file-inputs .

Answer 2

This is what we will add in the future, but not at present. There is a github discussion with several users publishing their implementations that they currently use, https://github.com/vuetifyjs/vuetify/issues/238

Answer 3

A simple trick:

 <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 it works as an identifier, you can name it whatever you want
• v-show=false this hides the input

Then create a button that, when clicked on, triggers a click event on the input download button.

Answer 4

Good news.

Starting with version 2.0.0. -beta.8 v-file-input is available in Vuetify. You should use this as:

 <template> <v-file-input accept=".txt" label="Select File..."></v-file-input> </template> 

UPDATE (SNIPPET ADDITION):

The main use for image file processing can be implemented as follows:

 new Vue({ el: '#app', vuetify: new Vuetify(), data: () => ({ file: null, imageUrl: null }), methods: { onFileChange() { let reader = new FileReader() reader.onload = () => { this.imageUrl = reader.result } reader.readAsDataURL(this.file) }, onUpload() { console.log(this.file) } } }) 

 <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/font @3.x /css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/ vuetify@2.x /dist/vuetify.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/ vue@2.x /dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/ vuetify@2.x /dist/vuetify.js"></script> <div id="app"> <v-app> <v-content> <v-container> <v-file-input v-model="file" label="Select Image File..." accept="image/*" @change="onFileChange" ></v-file-input> <v-btn color="primary" @click="onUpload">Upload</v-btn> </v-container> </v-content> </v-app> </div> 

Answer 5

Well, you can always use the Vue input file. Material: https://vuematerial.io/components/file