Within my template, I have an img tag that is linked to a state known as "imageBuffer"
<img v-bind:src="imageBuffer" alt="" />
In the logic of the page, there are two file inputs and I've utilized a single function to manage file selection:
onFilePicked(event, type) {
const extension = this.getExtension(event.target.files[0].name);
let isValid = false;
if (type === 'pdf' && extension === 'pdf') {
isValid = true;
}
if (type === 'image' && (extension === 'jpg' || extension === 'png')) {
isValid = true;
}
if (isValid) {
const fileReader = new FileReader();
if (type === 'pdf') {
const files = event.target.files;
let filename = files[0].name;
fileReader.addEventListener('load', () => {
});
this.pdf = files[0];
} else if (extension === 'png' || extension === 'jpg') {
fileReader.addEventListener('load', () => {
this.imageBuffer = fileReader.readAsDataURL(event.target.files[0]);
});
}
} else {
alert('Invalid file type');
}
},
The PDF selector is functioning correctly. However, when I check the console log for "imagebuffer", it appears to be malfunctioning as the image preview isn't displaying. Which FileReader method should I employ in order to retrieve the image buffer and convert it into a png format?