title: take picture from Input field and convert to base64
body: <p>I want to be able to take picture from PC and uploaded to server. So far I have managed to take a picture from a div, convert it to base64 and send it to server side. This works without a problem.</p>
  
  <p>My HTML:</p>
  
  <pre><code>  &lt;img src="AvatarIMG/Goofy.jpg" id="img" width="100" height="100"&gt;
  </code></pre>
  
  <p>My JavaScript:   </p>
  
  <pre><code>  $('#but_upload').click(function () {
              var c = document.createElement('canvas');
              var img = document.getElementById('img');
              c.height = img.naturalHeight;
              c.width = img.naturalWidth;
              var ctx = c.getContext('2d');
              console.log(ctx);
              ctx.drawImage(img, 0, 0, c.width, c.height, 0, 0, c.width, c.height);
              var base64String = c.toDataURL();
  
              $.ajax({
                  url: 'Avatar',
                  method: 'PUT', 
                  contentType: 'application/json',
                  headers: {
                      'Authorization': 'Bearer '
                          + sessionStorage.getItem("accessToken")
                  },
                  dataType: "text",
                  data: JSON.stringify(base64String),
                  success: function (data) {
                  },
                  error: function (jQXHR) {
                  }
              });
          });
  </code></pre>
  
  <p>However i want to be able to pick a picture from my local computer and then upload it but so far no luck... This is what I have tried...</p>
  
  <p>My HTML:</p>
  
  <pre><code> &lt;input id="uploadImage" type="file" name="myPhoto" /&gt;
  </code></pre>
  
  <p>My JavaScript:</p>
  
  <pre><code> $('#but_upload').click(function () {
  
              var img = document.createElement("img");
              img.height = 30;
              img.width = 20;
  
              var oFReader = new FileReader();
              oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);
  
              oFReader.onload = function (oFREvent) {
                  img.src = oFREvent.target.result;
              };
  
              var c = document.createElement('canvas');
              c.height = img.naturalHeight;
              c.width = img.naturalWidth;
              var ctx = c.getContext('2d');
  
              ctx.drawImage(img, 0, 0, c.width, c.height, 0, 0, c.width, c.height);
              var base64String = c.toDataURL();
  
  
  
              $.ajax({
                  url: 'Avatar',
                  method: 'PUT', 
                  contentType: 'application/json',
                  headers: {
                      'Authorization': 'Bearer '
                          + sessionStorage.getItem("accessToken")
                  },
                  dataType: "text",
                  data: JSON.stringify(base64String),
                  success: function (data) {
                  },
                  error: function (jQXHR) {
                  }
              });
          });
  </code></pre>
  
  <p>Some help pls.</p>