How to use a button as a file uploader with Vuetify in Vue.js

In some cases, you won't need complex file pickers in your forms, sometimes a simple button that allows you to pick a single file is enough. Vuetify offers a lot of components that you can use to create your forms and one of them is the regular file inputs that are beautified, however, they still look like text inputs.

In this short article, I'm going to show you a way to use a simple Vuetify button to act as a file picker.

Using a Vuetify button as a fileinput

For this approach, we will use a simple v-btn component that will display a loading icon that will remain until the user closes the system native file picker. The structure is simple, the button will have special properties, the :loading attribute will store the state of the isSelecting variable and when the user clicks on the button, the handleFileImport method will be executed.

The data state will have 2 properties, the mentioned isSelecting boolean an the selectedFile that will contain the select file by the user. So finally, when the user clicks on the button, the loading status will change and will return to its normal state when the user comes back to the window, that's why the event listener is attached once to the window:

<template>
    <div>
        <!-- 1. Create the button that will be clicked to select a file -->
        <v-btn 
            color="primary" 
            rounded 
            dark 
            :loading="isSelecting" 
            @click="handleFileImport"
        >
            Upload File
        </v-btn>

        <!-- Create a File Input that will be hidden but triggered with JavaScript -->
        <input 
            ref="uploader" 
            class="d-none" 
            type="file" 
            @change="onFileChanged"
        >
    </div>
</template>

<script>
    export default {
        name: 'Example',
        data(){
            return {
                isSelecting: false,
                selectedFile: null
            }
        },
        methods: {
            handleFileImport() {
                this.isSelecting = true;

                // After obtaining the focus when closing the FilePicker, return the button state to normal
                window.addEventListener('focus', () => {
                    this.isSelecting = false
                }, { once: true });
                
                // Trigger click on the FileInput
                this.$refs.uploader.click();
            },
            onFileChanged(e) {
                this.selectedFile = e.target.files[0];

                // Do whatever you need with the file, liek reading it with FileReader
            },
        }
    }
</script>

By doing this, you will have a very simple file picker that doesn't use the default file inputs of Vue.js.

Happy coding ❤️!