Recently I have written a function to get the image preview by using file reader. I have written this code block using Typescript.
Use case: User can select multiple images for uploading, I will be showing the thumbnail as image preview.
The below code block has been wrapped inside a function. I am eagerly waiting for suggestions and feedbacks.
if (event.target.files) {
let files = event.target.files;
var contextArray = this.contextArray; // shallowcopy
var contextImageArray = this.contextImageArray; // shallowcopy
for (let file of files) {
const reader: FileReader = new FileReader();
reader.onload = (function(f) {
return function(e) {
contextArray.push(f);
contextImageArray.push(
{'image': e.target.result, 'name': f['name']});
}
})(file);
reader.readAsDataURL(file);
}
}