Home Bootstrap 5 Vuejs Vue 3 Image Upload Preview Working Functionality

Vuejs Vue 3 Image Upload Preview Working Functionality

by therichpost
Vuejs Vue 3 Image Upload Preview Working Functionality

Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Vuejs Vue 3 Image Upload Preview Working Functionality.

Working Video

Vuejs Vue 3 Image Upload Preview Working Functionality
Vuejs Vue 3 Image Upload Preview Working Functionality

Vue 3 and Bootstrap 5 came and if you are new then you must check below two links:

  1. Vuejs
  2. Bootstrap 5

Friends now I proceed onwards and here is the working code snippet and use this carefully to avoid the mistakes:

1. Firstly friends we need fresh vue 3 setup and for this we need to run below commands . Secondly we should also have latest node version installed on our system. With below we will have bootstrap 5(for good looks) modules in our Vue 3 application:

npm install -g @vue/cli

vue create vuedemo

cd vuedemo

npm install bootstrap --save

npm run serve //http://localhost:8080/

2. Now friends we need to add below code into vuedemo/src/App.vue file to check the final output on browser:

 <div class="App container mt-5">
    <div class="mb-3">
      <label for="formFile" class="form-label">Upload Image:</label>
      <input class="form-control" ref="fileInput" type="file" @input="pickFile">
       <div class="imagePreviewWrapper" :style="{ 'background-image': `url(${previewImage})` }" @click="selectImage"></div>


//importing bootstrap 5 and pdf maker Modules
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
export default {
    methods: {

      //image upload and preview methods
        selectImage () {
      pickFile () {
        let input = this.$refs.fileInput
        let file = input.files
        if (file && file[0]) {
          let reader = new FileReader
          reader.onload = e => {
            this.previewImage = e.target.result
          this.$emit('input', file[0])
      data: function() {
  return {
     previewImage: null

3. Now friends we need to create `App.css` file inside vuedemo/src folder add below code into vuedemo/src/App.css file:

.imagePreviewWrapper {
  background-repeat: no-repeat;
    width: 250px;
    height: 250px;
    display: block;
    cursor: pointer;
    margin: 0 auto 30px;
    background-size: contain;
    background-position: center center;

Now we are done friends and If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.



You may also like


Baraa September 13, 2022 - 12:28 pm

Very useful, thanks.

therichpost September 13, 2022 - 3:55 pm



Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.