[ksevelyar]

Есть форма:

<form accept-charset="UTF-8" action="/foobar/images" class="new_image" data-remote="true" enctype="multipart/form-data" id="new_image" method="post">
<div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="o8e15OqFzi/PYcWfzwpoBZb4YMHJ3JZ+2TU9Id/afi8=" /></div>
  <p>
    <label for="image_name">Name</label>
    <br>
    <input id="image_name" name="image[name]" size="30" type="text" />
  </p>
  <p>
    <input id="image_image" name="image[image]" type="file" />
  </p>
  <p>
    <input name="commit" type="submit" value="Create Image" />
  </p>
</form>

И такой простенький код, для отправки изображения через ajax:

function upload(file) {

  var formdata = new FormData();
  formdata.append("image[name]", "Foooobar");
  formdata.append("image[image]", file);
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "images");
  xhr.send(formdata);
}

$('#image_image').change(function()
{
  upload(this.files[0]);
});

Он работает и загружает изображение.

Но когда я пытаюсь сделать так:

$('#image_image').change(function()
{
  var formElement = document.getElementById("new_image");
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "images");
  xhr.send(formElement.getFormData());
});

То вижу ошибку в Файрбаге:

TypeError: formElement.getFormData is not a function
[Break On This Error] 	

xhr.send(formElement.getFormData());

Что я делаю не так? Почему js ругается на эту функцию?