Looking for an image uploader in Angular 5, I struggled to find the perfect one. Eventually, I came across a suitable option in JavaScript, but I need to use it in TypeScript instead.
Here is a snippet of the HTML code:
<div class="avatar-upload">
<div class="avatar-edit">
<input type='file' id="imageUpload" accept=".png, .jpg, .jpeg" />
<label for="imageUpload"></label>
</div>
<div class="avatar-preview">
<div id="imagePreview" style="background-image:
url(http://i.pravatar.cc/500?img=7);">
</div>
</div>
</div>
And here are some CSS styling details:
body {
background: whitesmoke;
font-family: 'Open Sans', sans-serif;
}
.container {
max-width: 960px;
margin: 30px auto;
padding: 20px;
}
...
In terms of JavaScript functionality:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
...
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imageUpload").change(function() {
readURL(this);
});
I am wondering how I can utilize this setup in Angular 6. If you have any insights or solutions, please share them with me. You can also check out the original source here.