Upload image from local storage using Vuejs

Question

When you click on "Choose file" and select an image for upload, the path however appears. The image gets uploaded only after you click "Choose file" one more time.

How to resolve this and upload as and when the file is chosen?

Any help would be much appreciated. Thank you.

new Vue({
  el: '.app',
  data: {
  userImage: ''
  },
  methods: {
    onFileChange(e) {
        var files = e.target.files || e.dataTransfer.files
        if (!files.length) {
          return
        }
        this.createImage(files[0])
      },
      createImage(file) {
        var reader = new FileReader()
        var vm = this

        reader.onload = (e) => {
          vm.userImage = e.target.result
        }
        reader.readAsDataURL(file)
      },
       removeImage: function (e) {
         this.userImage = ''
       }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-6 text-center app">

  <img class="profile-image" :src="userImage" />

  <div v-if="!userImage">
    <input type="file" round class="change-profile-image" @change="onFileChange" />
  </div>
  <div v-else>
    <button class="delete-profile-image" color="secondary" icon="delete" @click="removeImage">Delete</button>
  </div>

</div>

My code on JSfiddle.

Eliran Malka · Accepted Answer · 2017-10-18 09:13:43Z

You shouldn't rely on listening to the click event. What you are looking for is the change event instead, i.e. use @change instead of @click:

<input type="file" round class="change-profile-image" @change="onFileChange" />

See updated fiddle: https://jsfiddle.net/hrtzezk8/5/, or the proof-of-concept snippet below:

new Vue({
  el: '.app',
  data: {
  userImage: ''
  },
  methods: {
    onFileChange(e) {
        var files = e.target.files || e.dataTransfer.files
        if (!files.length) {
          return
        }
        this.createImage(files[0])
      },
      createImage(file) {
        var reader = new FileReader()
        var vm = this

        reader.onload = (e) => {
          vm.userImage = e.target.result
        }
        reader.readAsDataURL(file)
      },
       removeImage: function (e) {
         this.userImage = ''
       }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-6 text-center app">

  <img class="profile-image" :src="userImage" />

  <div v-if="!userImage">
    <input type="file" round class="change-profile-image" @change="onFileChange" />
  </div>
  <div v-else>
    <button class="delete-profile-image" color="secondary" icon="delete" @click="removeImage">Delete</button>
  </div>

</div>

Collectives™ on Stack Overflow

Upload image from local storage using Vuejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related