Vuetify

Vuetify Alert fade after a duration Vuetify Login Form Vuetify Toast Snackbar Demo Vuetify Disable Past Date in DatePicker Vuetify Scrollable Dialog Vuetify Dialog to Confirm Delete Vuetify input File get Selected file name Vuetify validate textarea character limit Vuetify V-Select multiple example Vuetify Checkbox Check All | Uncheck All Example Vuetify Disable Button for Certain Amount of Time Vuetify Validate Email Field Vuetify Change Button Color if Button active or selected Vuetify Change color of v-chip on click Vuetify Image Upload with Preview Vuetify Clear text field using ref Vuetify Disable Future date in Datepicker Vuetify Set Current Date in Datepicker Vuetify rule for Number Between 0 and 999 or no input Vuetify Validation Rule: Allow Empty String or Specific Number of Characters Vuetify Allow only alphanumeric characters in textfield Vuetify Rule Input Text only Accept Number and Dot Vuetify set Confirm Password Validation Rule in text-fields Vuetify Text Field Allow 10 digit Number Vuetify Add Comma to Input Field Automatically Vuetify Check if input contains special characters

Vuetify input File get Selected file name

In this tutorial, we will explore how to create a Vuetify file input component and use JavaScript to get the name of the selected file. We'll walk you through the code, explaining each part step by step.

written

reviewed

updated

How to Get the Selected File Name with Vuetify File Input in JavaScript?

In this HTML code, we create a Vuetify container and a file input component. The v-model directive binds the input's value to the selectedFile variable. We also display the selected file's name or "No file selected" using Vue's templating syntax

HTML Code:

<v-container>
    <v-file-input v-model="selectedFile" show-size label="File input"></v-file-input>
    <p>Selected File: {{ selectedFile ? selectedFile.name : 'No file selected' }}</p>
</v-container>

Run

In this JavaScript code:

We initialize a new Vue instance and specify #app as the element to mount it to.
We set up Vuetify by creating a new instance of Vuetify.
Inside the data property, we define a selectedFile variable with an initial value of null. This variable will be used to store the selected file.
The watch property is used to watch for changes in the selectedFile variable. When a new file is selected, the selectedFile function is called.
Inside the selectedFile function, we check if a new file has been selected (i.e., newFile is not null), and if so, we log the selected file's information to the console.

The key to understanding this code is the v-model binding, which automatically updates the selectedFile variable whenever a file is selected. The watch block then detects this change and logs the selected file's information

Javascript Code

 <script>
        new Vue({
            el: '#app',
            vuetify: new Vuetify(),
            data() {
                return {
                    selectedFile: null,
                };
            },
            watch: {
                selectedFile: function (newFile) {
                    if (newFile) {
                        console.log("Selected File:", newFile);
                    }
                }
            }
        })
    </script>

Output of

Pasted Image

In summary, this code demonstrates how to create a Vuetify file input component and use Vue.js to dynamically display the selected file's name. The watch function helps monitor changes in the selectedFile variable, allowing you to perform actions based on the selected file, such as logging its information to the console. This is a simple and effective way to work with file inputs in Vuetify and Vue.js.

Vuetify

Vuetify input File get Selected file name

Feedback for Abhishek

How to Get the Selected File Name with Vuetify File Input in JavaScript?

HTML Code:

Javascript Code