Ввод HTML-файла не срабатывает при изменении события и отключает контроль ввода файла

Question

У меня есть простая HTML-форма, где я сохраняю информацию о продукте, а затем обновляю экран с сохраненной информацией о продукте. После этого пользователь может загрузить документ. У меня здесь два вопроса:

1. Пока пользователь не сохранит информацию о продукте, кнопка загрузки не должна нажиматься.
2. Как только продукт сохранен и сгенерирован идентификатор, кнопка ввода файла должна быть нажата и разрешать загрузку файла.

Я уже пытался сбросить значение формы, как это из других сообщений:

$('#docUpload').closest('form').get(0).reset();

HTML

 <div class="input-group mb-3">                    
      <input type="file" id="docUpload" style="display:none"/> 
      <label for="docUpload" class="btn btn-info">Upload Doc</label>        
 </div> 

JavaScript

$('#docUpload').on('click', function () {
    $('#docUpload').closest('form').get(0).reset();
    this.value = null;
});

$('#docUpload').on('change', function (e) {

    $('#docUpload').closest('form').get(0).reset();

    var files = $('#docUpload').get(0).files;

    var formData = new FormData();
    for(let i=0; i<files.length; i++){

        formData.append('DocumentUpload', files[i]);
        formData.append('PId', $('#pId').val());
        formData.append('Name', 'abc');            
    }
        UploadFiles(formData);
    }); 

function UploadFiles(formData) {

    $.ajax({
       type: 'POST',
        url: '/Some/UploadFile',
        data: formData,
        contentType: false,
        processData: false,
        success: function (data) {
            alert(data); 
        }
    });

};

Я могу сохранить информацию о продукте и перезагрузить форму из обратного вызова ajax. Я не могу заставить этот ввод файла работать последовательно и иногда вижу DOMException в консоли.

Uncaught (in promise) DOMException: Failed to execute 'postMessage' on 'Window': An object could not be cloned.
    at Object.t.messageJumpContext

Событие onchange не запускается последовательно.

Answer 1

Событие изменения не работает для типа ввода = "file", Попробуйте использовать:

<script>
   $('#docUpload').on('keyup keydown blur keypress', function (e) {

      $('#docUpload').closest('form').get(0).reset();

      var files = $('#docUpload').get(0).files;

      var formData = new FormData();
    for(let i=0; i<files.length; i++){

        formData.append('DocumentUpload', files[i]);
        formData.append('PId', $('#pId').val());
        formData.append('Name', 'abc');            
    }
        UploadFiles(formData);
   }); 
</script>