title: Upload image by clicking on a icon
body: <p>i  want create a functionality where i can upload a photo by clicking on the camera icon. Basically i want to do the same thing as when you click a button to choose a file you wanna upload, but i´m not finding a way to do that in the moment.
  <a href="https://i.stack.imgur.com/nWqlE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nWqlE.png" alt="enter image description here" /></a></p>
  <p><strong>The html that i used to place the things</strong></p>
  <pre><code>&lt;div class=&quot;user-sidebar &quot;&gt;
      &lt;div class=&quot;profile-pic&quot;&gt;
        &lt;img src=&quot;/img/pic.png&quot; alt=&quot;&quot; class=&quot;pic&quot;&gt;
        &lt;form action=&quot;&quot;&gt;
          &lt;input type=&quot;file&quot; name=&quot;pic&quot; accept=&quot;image/*&quot;&gt;
          &lt;i class=&quot;fas fa-camera fa-2x&quot;&gt;&lt;/i&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  <p><strong>CSS related to the html</strong></p>
  <pre><code>.user-sidebar {
    width: 30vw;
    height: 100vh;
  
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    background-color: var(--white2);
  }
  
  .profile-pic {
    margin: 100px auto 0px auto;
    height: 170px;
    width: 170px;
    border-radius: 50%;
  
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    overflow-y: hidden;
  }
  
  .profile-pic i {
    position: absolute;
    top: 230px;
    left: 270px;
    cursor: pointer;
  
    color: var(--white);
  }
  </code></pre>