title: Javascript/jQuery Append to FormData() returns 'undefined'
body: <p>I'm trying to do a simple file upload using jQuery. I have a file input in my HTML like so:</p>
  
  <pre><code>&lt;form id="PhotoUploadForm" action="/some/correct/url" method="post" enctype="multipart/form-data"&gt;
              &lt;input type="file" id="uploadPhoto" accept="image"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I also have some JavaScript / jQuery bound to the change event of the input, like so:</p>
  
  <pre><code>   $('#uploadPhoto').on("change", function (event) {
  
          var fileData = this.files[0];
          var data = new FormData();
          data.append('image',fileData);
          data.append('content','What could go wrong');
          console.log(data.image, data.content); // this outputs 'undefined undefined' in the console
  
          $.ajax ({
              url: "/some/correct/url",
              type: 'POST',
              data: data,
              processData: false,
              beforeSend: function() {
                 console.log('about to send');
              },
              success: function ( response ) {                   
                  console.log( 'now do something!' )
              },
              error: function ( response ) {
                  console.log("response failed");
              }
          });
      });
  </code></pre>
  
  <p>I noticed I was getting a 500 error! Most likely the data is incorrect, I know the URL is good. So I tried to output the data to the console and I noticed that my data appends return '<code>undefined</code>'</p>
  
  <pre><code>console.log(data.image, data.content); // this outputs 'undefined undefined' in the console
  </code></pre>
  
  <p>when I console.log(data) I get the following:</p>
  
  <pre><code>FormData {append: function}__proto__: FormData
  </code></pre>
  
  <p>Am I doing something wrong here? Why are <code>data.image</code> &amp; <code>data.content</code> undefined? When I output the <code>this.files[0]</code> I get the following:</p>
  
  <pre><code>File {webkitRelativePath: "", lastModified: 1412680079000, lastModifiedDate: Tue Oct 07 2014 13:07:59 GMT+0200 (CEST), name: "2575-Web.jpg", type: "image/jpeg"…}lastModified: 1412680079000lastModifiedDate: Tue Oct 07 2014 13:07:59 GMT+0200 (CEST)name: "2575-Web.jpg"size: 138178type: "image/jpeg"webkitRelativePath: ""__proto__: File
  </code></pre>
  
  <p>So the issue isn't with the image. Am I correct?</p>