Show image after upload without any plugins
Clever Cottonmouth
Posted on December 20, 2022
fileBrowseHandler(files: any) {
if (files.target.files && files.target.files[0]) {
const reader: FileReader = new FileReader();
reader.readAsDataURL(files.target.files[0]);
reader.onload = () => {
this.preview = reader.result;
};
reader.onerror = (error) => {
console.log('Error: ', error);
};
}
}
Here is the explanation for the code above:
- files.target.files is an array-like object. It contains the files that the user has selected.
- FileReader object lets web applications asynchronously read the contents of files.
- reader.readAsDataURL(files.target.files[0]) is used to read the contents of the specified Blob or File.
- reader.onload is an event handler which is called when the read operation successfully completes.
- reader.onerror is an event handler which is called when the read operation fails.
- this.preview is a variable which stores the base64 image data of the selected file.
💖 💪 🙅 🚩
Clever Cottonmouth
Posted on December 20, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
privacy Caught in the Crunch My Journey from Snacks to 2 Million Exposed Users Privacy
November 30, 2024
devchallenge Submission for the DevCycle Feature Flag Challenge: Feature Flag Funhouse
November 30, 2024