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 Image Upload with Preview

Image uploading is a common feature in web applications. In this tutorial, we'll show you how to create a Vuetify image upload component with a preview using Vue.js and Vuetify. This tutorial consists of HTML, JavaScript, and CSS code segments, which together create a functional image upload feature with a preview option.

written

reviewed

updated

Setting Up HTML Structure

The HTML structure is a crucial part of creating the image upload component. It provides the foundation for the feature. The code includes the necessary Vuetify components, such as v-file-input for image selection and a modal dialog for displaying the image preview. Users can follow the HTML structure to create this component in their own applications

Creating a Vuetify Image Upload with Preview

<v-main>
    <v-container>
        <h3 class="text-center">Vuetify Image Upload with Preview</h3>
        <v-row justify="center">
            <v-col cols="12" sm="6" md="4">
                <v-file-input v-model="selectedFile" label="Choose Image" @change="handleFileUpload"></v-file-input>
            </v-col>
            <v-col cols="12" sm="6" md="4">
                <!-- Display the preview image next to the input file element -->
                <v-img v-if="previewImage" :src="previewImage" alt="Preview" class="preview-image"
                    @click="showModal"></v-img>
            </v-col>
        </v-row>
    </v-container>
    <v-dialog v-model="isModalVisible" max-width="800">
        <v-card>
            <v-card-actions><v-spacer></v-spacer>
                <v-btn icon @click="hideModal" class="modal-close">
                    <v-icon>mdi-close</v-icon>
                </v-btn>
            </v-card-actions>
            <v-img :src="previewImage" alt="Preview"></v-img>

        </v-card>
    </v-dialog>
</v-main>

Run

Handling Image Upload with JavaScript

The JavaScript code is responsible for managing the image upload and preview functionality. It utilizes Vue.js to handle user interactions and image processing. The code includes functions for reading the selected image file, displaying a preview, and controlling the modal dialog. Users can follow this code to implement the logic behind the image upload feature.

Javascript code

   <script>
        new Vue({
            el: '#app',
            vuetify: new Vuetify(),
            data() {
                return {
                    selectedFile: null,
                    previewImage:
                        "https://www.sarkarinaukriexams.com/images/editor/1684236637tree-g37135fa70_640.jpg",
                    isModalVisible: false,
                };
            },
            methods: {
                handleFileUpload() {
                    const file = this.selectedFile;
                    if (file) {
                        const reader = new FileReader();
                        reader.onload = () => {
                            this.previewImage = reader.result;
                        };
                        reader.readAsDataURL(file);
                    }
                },
                showModal() {
                    this.isModalVisible = true;
                },
                hideModal() {
                    this.isModalVisible = false;
                },
            },
        });
    </script>

Output

Pasted Image

Styling the Preview with CSS

To enhance the user interface, the CSS code provides styling for the image preview. It makes the preview image round and specifies its dimensions. Users can customize these styles to match their application's design requirements.

CSS

<style scoped>
    /* Add styles for the preview image */
    .preview-image {
        border-radius: 50%;
        width: 100px;
        /* Adjust the size as needed */
        height: 100px;
        /* Adjust the size as needed */
    }
</style>

In summary, this tutorial demonstrates how to create a Vuetify image upload component with a preview feature using Vue.js and Vuetify. Users can select an image, see a preview of the selected image, and click on it to view a larger version in a modal dialog.