Upload image from local storage using Vuejs - vue.js

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.

Answer 1

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>