Image Preview Before Upload In VueJS Project

#nuxt #vue #javascript #vuetify

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>