Собрать данные с формы с загрузкой файлов

Необходимо с формы собрать данные по файлам для дальнейшей передачи их AJAX'ом на сервер.

<form id="upload-docs" name="uploadDocs">
  <div class="field-upload">
    <label for="file1">Файл1:</label>
    <input id="file1" name="file1" type="file" accept=".xlsx,.xls,image/*,.doc, .docx,.ppt, .pptx,.txt,.pdf">
  </div>
  <div class="field-upload">
    <label for="file2">Файл 2:</label>
    <input id="file2" name="file2" type="file" accept=".xlsx,.xls,image/*,.doc, .docx,.ppt, .pptx,.txt,.pdf">
  </div>
  <input type="submit" value="Загрузить файлы">
</form>

Собираю данные таким образом

$('form#upload-docs input').each(function() {
   formData.append(this.name, $(this).prop('files')[0]);
});

Если собирать отдельно с каждого инпута, т.е.

formData.append('file1', $('file1').prop('files')[0]);
formData.append('file2', $('file2').prop('files')[0]);

То все работает. Если делаю через each то по итогу выходит ошибка Uncaught TypeError: Cannot read property '0' of null.

В идеале необходимо собрать данные в виде объекта, чтобы на сервере было обращение такое files['file1'][name].