Can someone assist me with this issue? I am facing a problem where the input.addeventlistener is not detecting files on change. My setup involves using Vue with Rails.
I am looking to trigger the event listener in the mount hook of a Vue component.
mounted() {
debugger
this.previewUrl = this.placeholder;
const input = this.$refs.inputSlot.querySelector('input[type="file"]')
if (input) {
input.addEventListener('change', event => {
if(input.files[0]){
const fakeFilePath = event.currentTarget.value
if (input.files[0].size > this.sizeLimit) {
alert(this.$t('error.file_size', { max_size: this.maxSize }));
input.value = '';
} else {
this.fileName = input.files[0].name
if (this.preview == 'image') {
const reader = new FileReader();
reader.onload = event => {
this.selectedFile = this.oldImage = this.previewUrl;
this.previewUrl = event.target.result;
this.choosenFile = fakeFilePath;
};
reader.readAsDataURL(input.files[0]);
}
}
}
})
}
}
Below is the corresponding input field:
<input accept="image/jpeg,image/png,.jpeg" type="file" name="user[profile_picture]" id="user_profile_picture">