Quick Tip: How to Use VueJS to Preview Images Before Uploading

Taha Shashtari has written a good tutorial about using VueJS to preview images before uploading. If you're using Laravel with VueJS, this is a must read.

Let's say, for example, you're building an app where your users can upload images to their profiles. It's likely you want to preview those images before they are uploaded — it's usually a good way to provide some feedback to the user.

In this short tutorial, I'm going to show you how to set up a simple Vue component that lets you do just that. Here's a demo of what we're going to build.

The template

Let's start first by defining the template of our component.

<template id="image-input-template">
    <div class="Image-input">
        <div class="Image-input__image-wrapper">
            <i v-show="! imageSrc" class="icon fa fa-picture-o"></i>
            <img v-show="imageSrc" class="Image-input__image" :src="imageSrc">
        </div>

        <div class="Image-input__input-wrapper">
            Choose
            <input @change="previewThumbnail" class="Image-input__input" name="thumbnail" type="file">
        </div>
    </div>
</template>

We only care about two things here. The property imageSrc, which contains the image's source to be previewed and then uploaded. And the event we registered on the file input @change="previewThumbnail", which gets triggered when the user chooses an image.