Posted on Dec 26, 2020

Image Preview Before Upload In VueJS Project

Hi Everyone, Hope you are doing well and staying safe,

Today I will be sharing with you the small snippet of code that can help you to preview the image the user before it gets uploaded

Create a Directory and File.

mixins/ImagePreviewMixin.vue

<script> export default { data() { return { imagePreviewURL: null, } }, methods: { onFileChange(payload) { //const file = payload.target.files[0]; // use it in case of normal HTML input const file = payload; // in case vuetify file input if (file) { this.imagePreviewURL = URL.createObjectURL(file); URL.revokeObjectURL(file); // free memory } else { this.imagePreviewURL = null } } }, } </script>

We have created the Mixin and we can import that mixin into component

for example

components/UpdateUserAvatar.vue

<script> import ImagePreviewMixin from "@/mixins/ImagePreviewMixin"; export default { mixins: [ImagePreviewMixin], } </script>  <template><div> Using Vuetify <v-file-input v-model="avatarImage" label="Image" required @change="onFileChange" ></v-file-input>  /* IN case of Normal HTML Input <input v-model="avatarImage" type="file" label="Image" required @change="onFileChange" ></v-file-input> */ <img v-if="imagePreviewURL" :src="imagePreviewURL" alt="" style="max-width: 100%;width: 250px; object-fit: cover" /> </div></template>