CODEWITHSUNDEEP
htmlcssangularjs
Will Bodansky
Will Bodansky

Reputation: 1

User Profile photo, with clickable icon in the corner to upload photo - html

I want to implement a user profile photo in the navbar of my web app, to be more specific I wish to have a placeholder see placeholder

And then put a camera icon on the top right corner of the circle: see camera icon

When someone clicks on the camera icon they can upload a photo to change their profile picture, in any photo format. Here is what I have but the result gives me a messy output, with "choose file", the name of the file, and "submit". I don't want any of this - just the round placeholder icon where the photo file will be shown, and the small camera icon on the top right of the photo circle.

<div class="row">
              <div class="col-sm-6 col-md-4">
                <div class="img-circle usericon">
                  <img src="https://plus.google.com/photos/114809861514342788109/album/6306090224289882481/6306090221879682418?authkey=CJPV_OKHvczjSw" class="img-circle img-responsive" width="100" height="100">
                  <div>
                    <img src="https://plus.google.com/photos/114809861514342788109/album/6306090224289882481/6306090221856483314?authkey=CJPV_OKHvczjSw">
                  </div>
                  <div class="caption">
                    <form action="demo_form.asp">
                      <input type="file" name="pic" accept=".gif,.jpg,.png,.tif|image/*">
                      <input type="submit">
                    </form>
                  </div>
                </div>
              </div>
            </div>

I uploaded the icons to google plus, so that is why the src is a google plus link. Many thanks in advance

Upvotes: 0

Views: 2648

Answers (1)

Steven Dropper
Steven Dropper

Reputation: 467

Hide your form and bind a label to file input...

<label for='picture'>
    <img src="https://plus.google.com/photos/114809861514342788109/album/6306090224289882481/6306090221856483314?authkey=CJPV_OKHvczjSw">
</label>

<form action="demo_form.asp" style='display: none;'>
    <input type="file" name="pic" accept=".gif,.jpg,.png,.tif|image/*" id='picture'>
    <input type="submit">
</form>

Upvotes: 1

Related Questions