Click on image to upload image

Question

I have this code in jQuery:

$("#profileImage").click(function(e) {
    $("#imageUpload").click();
});

and this is the HTML:

<image id="profileImage" src="http://lorempixel.com/100/100" />
<input id="imageUpload" type="file"  name="profile_photo" placeholder="Photo" required="" capture>

how can I replicate it in Angular 4?

EDIT: from the first comment i see my question is not clear.

I would like to create an "edit the profile image, if clicked on the image". this will open the "select file popup"

here is the example made with jQuery Add a Profile Picture in form in HTML and CSS

i would like to do it in angular 4

thank you

you can use [`ViewChild`](https://angular.io/api/core/ViewChild) to get an html element in your Angular component, [here is some implementation example from SO](https://stackoverflow.com/a/34636472/6638533) — samAlvin, Oct 11 '17 at 08:53

score 0 · Answer 1 · answered Oct 11 '17 at 11:51

so i have the answer, can be used just plain javascript

var input = document.getElementById('inputPhoto');
input.addEventListener('click', function (e) {
    // no need for extra code here
    console.log('click triggered');
});

input.click(); // opening dialog

ps: community there is no need for downvote if you don't know the answer. just ignore. someone will have the same issue one day and this will come in handy.

Click on image to upload image

1 Answers1