Данные формы не отправляются при вызове ajax

Question

Мне нужно сделать вызов ajax каждый раз, когда пользователь меняет свое изображение профиля. Я могу успешно выполнить ajax-вызов, но проблема в том, что ничего не отправлено на сервер.

<form action="#" enctype='multipart/form-data' id="avatar-upload-form"> 
    <div class="form-group"> 
     <label class="btn btn-default btn-file btn-block"> 
       Upload new picture <input type="file" style="display: none;" name="profile_image" id="profile_image"> 
     </label> 
    </div> 
</form> 

$('#profile_image').on('change', function() { 
    var formData = new FormData("#avatar-upload-form"); 
    $.ajax({ 
     url: '/users/upload/avatar', 
     type: 'POST', 
     dataType: 'json', 
     enctype: 'multipart/form-data', 
     cache:false, 
     processData: false, 
     contentType: false, 
     data: formData, 
     success: function(data) { 
      console.log(data); 
     }, 
     error: function(error) { 
      console.log(error); 
     } 
    }) 
}); 

PHP код

Route::post('/users/upload/avatar', function() { 
    dd(Request::file('profile_image')); // return empty array 
}); 

Answer 1

Решить эту проблему самостоятельно. Мне просто нужно использовать стандартную форму объектов JavaScript следующим образом:
document.getElementById('form_id')[0]