title: Get base64 image with javascript
body: <p>i need to upload an image by an input file, convert it to base64 and send it to an API using ajax. I can convert the image but can't return the base64 into a variable to make the json. Here is my code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;input id="picture" type="file"&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>const picture = document.getElementById("picture")
  
  function loadImageFileAsURL() {
      var filesSelected = picture.files;
      if (filesSelected.length &gt; 0) {
          var fileToLoad = filesSelected[0];
          var fileReader = new FileReader();
  
          fileReader.onload = function(fileLoadedEvent) {
              console.log(fileLoadedEvent.target.result);
          }
  
          fileReader.readAsDataURL(fileToLoad);
      }
  }
  
  picture.addEventListener('change', function() {
      loadImageFileAsURL()
  })
  </code></pre>
  
  <p>It returns the base64 image in the console.</p>
  
  <p>So i'm try to save this into a variable changing this: <code>console.log(fileLoadedEvent.target.result);</code> by this: <code>let pictureEnconde = fileLoadedEvent.target.result;</code> but it returns undefined. I don't know what's going on :( i will appreciate your help.</p>