Hey there, I'm looking to implement a feature where users can choose an image by clicking on the current image itself.
Here's my code snippet. The variable url holds the default image. My goal is to make the current image clickable so that when a user clicks on it, they can select a new image. Is there a way to achieve this without using <input type="file>?
onFileChanged(event) {
if (event.target.files && event.target.files[0]){
var reader = new FileReader();
reader.readAsDataURL(event.target.files[0]);
reader.onload = (event) => { //
this.url = event.target.result;
}
}
}<div class="col-md-3">
<img [src]="url" style="bordered:5px; double-black; border-radius: 8px; max-height: 200px; max-width: 390px; border: 2px solid #ddd;">
</div>