title: Send multi data JS object through Ajax
body: <p>I'm trying to collect string values and images from my form and append them to my JS object. I have no issues with the string values, but when I put the binary data into the JS object, it's always empty</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="form-section"&gt;
  
  &lt;div class="form-element"&gt;
   &lt;input class="upl-img" type="file" /&gt;
  &lt;/div&gt;
  
  &lt;div class="form-element"&gt;
  
  &lt;/div&gt;
  &lt;div class="form-element"&gt;
   &lt;input class="upl-img" type="file" /&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>  function buildMyFormSection(){
  
     formElement = {
     options = {
     ---
     elemImage : getFormImage(this.closest($('#image-field'))[0].files[0]),
     -----
      }
  
      }
  
     }
     function getFormImage(imgInput){
     var img = {};
  
     var file = imgInput;
     var reader = new FileReader();
      reader.onload(function(e){
  
     img.name = imgInput.name;
     img.data = e.target.result;
  
     console.log(e.target.result);
  
     });
  
     reader.readAsDataURL(imgInput);
  
     return img;
  
     }
  </code></pre>
  
  <p>getFormImage function returns the desired data, but the elemImage above always shows me "{}" as value.</p>