Файл сохраняется пару раз вместо одного

Question

Когда я загружаю файл, он сохраняется X раз, где X - это время, которое вы загрузили. Если я попытаюсь загрузить его три раза подряд, он сохранит один файл, два файла, три файла, что даст нам всего 6.

Почему это происходит?

$(function() {
  $("#uploadButton").on('click', function() {
    const job_id = $(this).attr("data-item");

    $("#cvForm").submit(function(e) {
      e.preventDefault();

      var form_data = new FormData(document.getElementById("cvForm"));

      axios({
        method: 'post',
        url: '/job/apply/' + job_id,
        data: form_data,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(function(response) {
        console.log(response);
      }).catch(function(response) {
        console.log(response);
      });

      return false;
    });
  });
});

Форма это:

<div class="modal fade" id="CVModalUpload" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="cvForm" name="cv" method="post" action="{{ path('student_candidate', {'id':job.id}) }}" enctype="multipart/form-data">
                    <div class="input-group">
                        <div class="custom-file">
                            <input type="file" name="cv[file]" class="custom-file-input" id="uploadGroup" aria-describedby="uploadButton">
                            <label class="custom-file-label" for="uploadGroup">Choose CV</label>
                        </div>
                        <div class="input-group-append">
                            <button type="submit" name="cv[send]" class="btn btn btn-primary shadow rounded-0" id="uploadButton" data-item="{{ job.id }}">Upload CV</button>
                        </div>
                    </div>
                    {{ form_row(form._token) }}
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Answer 1

Проблема в том, что вы вкладываете свои обработчики событий. Чтобы исправить это движение submit() за пределами click().

Тем не менее, теперь, когда вы добавили HTML к вопросу, я вижу, что вам не нужен обработчик click совсем. Вы можете просто прочитать data-item с кнопки при отправке формы. Попробуйте это:

jQuery(function($) {
  $("#cvForm").submit(function(e) {
    e.preventDefault();

    let form_data = new FormData(this); // note 'this' here
    let job_id = $('#uploadButton').data('item'); // note 'data()' here

    axios({
      method: 'post',
      url: '/job/apply/' + job_id,
      data: form_data,
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }).then(function(response) {
      console.log(response);
    }).catch(function(response) {
      console.log(response);
    });
  });
});

Answer 2

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

Простое решение этой проблемы - просто измените атрибут типа кнопки «Отправить» на «кнопку».

Answer 3

Это вероятно из-за места, где вы реализовали submit(). Вы должны переместить его за пределы click() -eventHandler.