Неисправность функции Onclick

Question

У меня есть кнопка с функцией onclick, которая используется для загрузки имени и изображения в мой sql дБ. Проблема в том, что это не всегда работает. В большинстве случаев мне приходится пробовать несколько раз, чтобы добиться успеха.

Вот моя форма и функции:

function uploadImg(file) {
  var nome = document.getElementById('nome').value;
  var url = "receitas2.php?op=2&nome=" + nome;
  var xhr = new XMLHttpRequest();
  var fd = new FormData();
  xhr.open("POST", url, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      var res = JSON.parse(xhr.responseText);
      if (parseInt(res['val']) == 1) {
        alert(res['msg']);
        loadList();
      } else {
        alert(res['msg']);
      }
    }
  };
  fd.append('file0', file[0]);
  //fd.append('file', file);
  xhr.send(fd);
}

<form class="form-horizontal form-material">
  <div class="form-group">
    <label class="col-md-12">Nome</label>
    <div class="col-md-12">
      <input type="text" placeholder="Nome da receita" id="nome" class="form-control form-control-line" required>
    </div>
  </div>

  <div class="form-group">
    <label class="col-md-12">Imagem</label>
    <div class="col-md-12">
      <input class="form-control form-control-line" type="file" id="upload" required>
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-12">
      <button class="btn btn-success" onclick='uploadImg(document.getElementById("upload").files)'>Registar Receita</button>
    </div>
  </div>
</form>

Заранее спасибо!