Guide to showing a preview of an image prior to submitting a form using vue.js

Question

Guide to showing a preview of an image prior to submitting a form using vue.js

I created a Vue form but I'm having trouble making the image preview function work when users try to submit an image to the form.

After refreshing the page, I can see the image, but when uploading it, the preview link is broken. There is an option to remove an image, which works fine, but my goal now is to display an image preview.

                   <div class="image-block">
                            <div @click="selectImage('initial-image')">
                                <img class="img-icon"
                                     v-if="imageName === null">
                                <div :class="{'error' : errors.length > 0}" class="text-center"
                                     v-if="imageName === null">
                                    Select an image to upload
                                </div>
                            </div>
                            <div class="image-preview" v-if="imageName !== null">
                                <div class="remove-image" @click="removeImage"><i
                                    class="fa fa-remove"></i>
                                </div>
                                <img v-bind:src="'/images/json-ld/images/' + imageName" class="growth-image"
                                     @click="selectImage('initial-image')">
                            </div>
                        </div>
                        <validation-provider name="image" v-slot="{ validate, errors }">
                            <input type="file" @change="validate" name="image" accept="image/*"
                                   class="hidden"
                                   v-on:change="showFilePreview">
                            <span class="validation-error form-span">{{ errors[0] }}</span>
                        </validation-provider>

Methods:

 removeImage() {
            this.imageName = null;
        },
        selectImage(id) {
            document.getElementById(id).click();
        },
        showFilePreview(e) {
            let files = e.target.files || e.dataTransfer.files;
            if (!files.length) return;
            this.createImage(files[0]);
        },
        createImage(file) {
            let reader = new FileReader();
            let vm = this;

            reader.onload = (e) => {
                vm.image = e.target.result;
            };
            reader.readAsDataURL(file);
        },

Any suggestions on how to make this functionality work as intended?

javascript forms vue.js vuejs2

Answer 1

Answer №1

Here is a suggestion for optimization:

<img v-bind:src="'/images/json-ld/images/' + imageName" .. />

You can simplify it to:

<img v-bind:src="image" .. />
// You can also use the bind shortcut
<img :src="image" .. />

By making this change, the preview should work correctly.

Example #1

new Vue({
  el: '#app',
  data() {
    return {
      image: null,
    }
  },
  methods: {
    showFilePreview(e) {
      let files = e.target.files || e.dataTransfer.files;
      if (!files.length) return;
      this.createImage(files[0]);
    },
    createImage(file) {
      let reader = new FileReader();
      let vm = this;
      reader.onload = (e) => {
        vm.image = e.target.result;
      };
      reader.readAsDataURL(file);
    }
  }
})

#app { padding: 10px; }
#preview img { max-width: 100%; max-height: 150px; margin-top:10px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <input type="file" @change="showFilePreview" />
  <div id="preview">
    <img v-if="image" :src="image" />
  </div>
</div>

Another way to optimize the code is by using URL.createObjectURL() to simplify the process:

Example #2

new Vue({
  el: '#app',
  data() {
    return {
      image: null,
    }
  },
  methods: {
    showFilePreview(e) {
      let files = e.target.files || e.dataTransfer.files;
      if (!files.length) return;
      this.image = URL.createObjectURL(files[0]);
    }
  }
})

#app { padding: 10px; }
#preview img { max-width: 100%; max-height: 150px; margin-top:10px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <input type="file" @change="showFilePreview" />
  <div id="preview">
    <img v-if="image" :src="image" />
  </div>
</div>

Answer 2

Here is a suggestion for optimization:

<img v-bind:src="'/images/json-ld/images/' + imageName" .. />

You can simplify it to:

<img v-bind:src="image" .. />
// You can also use the bind shortcut
<img :src="image" .. />

By making this change, the preview should work correctly.

Example #1

new Vue({
  el: '#app',
  data() {
    return {
      image: null,
    }
  },
  methods: {
    showFilePreview(e) {
      let files = e.target.files || e.dataTransfer.files;
      if (!files.length) return;
      this.createImage(files[0]);
    },
    createImage(file) {
      let reader = new FileReader();
      let vm = this;
      reader.onload = (e) => {
        vm.image = e.target.result;
      };
      reader.readAsDataURL(file);
    }
  }
})

#app { padding: 10px; }
#preview img { max-width: 100%; max-height: 150px; margin-top:10px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <input type="file" @change="showFilePreview" />
  <div id="preview">
    <img v-if="image" :src="image" />
  </div>
</div>

Another way to optimize the code is by using URL.createObjectURL() to simplify the process:

Example #2

new Vue({
  el: '#app',
  data() {
    return {
      image: null,
    }
  },
  methods: {
    showFilePreview(e) {
      let files = e.target.files || e.dataTransfer.files;
      if (!files.length) return;
      this.image = URL.createObjectURL(files[0]);
    }
  }
})

#app { padding: 10px; }
#preview img { max-width: 100%; max-height: 150px; margin-top:10px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <input type="file" @change="showFilePreview" />
  <div id="preview">
    <img v-if="image" :src="image" />
  </div>
</div>

Answer 3

Answer №2

After successfully storing the base64 information in the vm.image variable, you can now easily insert it into the src attribute like so:

<img :src="image"/>

A more efficient way to retrieve the data is by implementing the following code snippet:

const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
     this.image = reader.result;
};

Answer 4

After successfully storing the base64 information in the vm.image variable, you can now easily insert it into the src attribute like so:

<img :src="image"/>

A more efficient way to retrieve the data is by implementing the following code snippet:

const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
     this.image = reader.result;
};

Answer 5

Answer №3

Thank you for taking the time to provide your insights.

Fortunately, I was able to resolve the issue by taking a different approach.

I realized that I needed to include the complete path to the image during the mounting process.

    mount() {
        axios.get('/app/json-ld/store-info')
        .then(res => {
        let data = res.data;

        this.imageName = data.store.image ? '/images/json-ld/images/' + 
    }

Then, I made sure to correctly define the src attribute as follows:

 <img v-bind:src="imageName" @click="selectImage('initial-image')">

Answer 6

Thank you for taking the time to provide your insights.

Fortunately, I was able to resolve the issue by taking a different approach.

I realized that I needed to include the complete path to the image during the mounting process.

    mount() {
        axios.get('/app/json-ld/store-info')
        .then(res => {
        let data = res.data;

        this.imageName = data.store.image ? '/images/json-ld/images/' + 
    }

Then, I made sure to correctly define the src attribute as follows:

 <img v-bind:src="imageName" @click="selectImage('initial-image')">

Guide to showing a preview of an image prior to submitting a form using vue.js

Answer №1

Answer №2

Answer №3

Similar questions

Angular 2: Store all form inputs within a JSON object upon submission

Issues with non-functional plugins that utilize AJAX functionality

Retrieve the overall number of Formik errors for a specific field array

Turning off strict mode in the bundling process of React with webpack can be achieved by following

How to flip the value in v-model using VueJS

Creating an array of objects sorted in alphabetical order

The function _vm.$refs.menu.open is not defined

Tips for utilizing the loadDataWithBaseURL() method to load CSS and JS files directly from an SDCARD

Is it possible for a Vue.js build to encounter errors due to unregistered components?

Diverse behaviors exhibited by an array of promises

An easy way to activate a toggle function when the page loads in React

The requested :id route could not be found using the findById() method in

Changing global variables within a POST request

The issue of JavaScript Memory Leakage when utilizing FileReader and Promise

Choose the text that appears in the input or textbox field when tapping or clicking on it

When integrating string variables into JavaScript regular expressions in Qualtrics, they seem to mysteriously vanish

Orbit around a moving object in Three.js

Loop through the JSON data and display any empty strings

Sending information to a single component among several

What is the best way to convert items from a foreach loop into a JSON string using the json_encode() function in PHP?