Bootstrap 4 Если тип входного файла имеет значение, покажите подтверждающее сообщение перед закрытием модального

Question

Привет, ребята. Как вы? Я работаю сейчас над проектом и хочу создать простой трюк. Я сделал простой jQuery код, но он все еще не работает так, как я хочу. Печальная история гласила: , если у входного файла типа есть значение, показывающее подтверждающее сообщение с да или нет перед закрытием модального , поэтому, если пользователь хочет покинуть страницу и закрыть модальное диалоговое окно, он должен показать подтверждающее сообщение с если он уверен в закрытии модального диалога ....

HTML КОД:

<div class="modal fade" id="modal_a" tabindex="-1" role="dialog" aria-labelledby="modal_aLabel" aria-hidden="true"data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-body">
   <div class="uploadavatar">
        <input type="file" 
               class="custom-file-input" 
               id="ID12" 
               name="avatar"
               value=""
               hidden />
        <label role="button" class="btn" for="ID12">
            Upload Now
        </label>
    </div>
</div>
</div>
</div>
</div>

JS КОД:

$(document).ready(function() {
    $(document).on('hidden.bs.modal', '#modal_a', function (e) {
        $('#ID12').on('change', function(e){
            const FileLength = $(this)[0].files.length;
            if(FileLength > 0){
                const ConfirmMessage = confirm("Are you sure?");
                if(ConfirmMessage){
                    $("#ID12").val('');
                }
            }
        });
    });
});

Answer 1

Итак, с небольшой помощью от terry .

В основном этот код ниже проверяет, существует ли файл во входных данных ...

Если файл существует, a подтверждение сработает.

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

Но если файл загрузки никогда не существовал при загрузке введите, то модал будет отклонен как обычно: -)

// launch the example modal
$('#test-modal').modal('show');

// check for changes on input and force value
$('#test-upload').on('change', function() {

  // force the value in the dom
  $(this).attr('value', $(this).val());

});

// lets run the confirm checks on hide
$(document).on('hide.bs.modal', '#test-modal', function(e) {

  // if upload value is not empty/specified
  if ($('#test-upload').val() != '') {

    // confirm your sure about cancelling upload
    var uploadSure = confirm("You sure you want to cancel your upload?");

    // confirm checks
    if (!uploadSure) {

      // stop modal closing
      e.preventDefault();

    } else {

      // continue closing/hiding modal

    }

  }

});

<div class="modal fade" id="test-modal">
  <div class="modal-dialog modal-dialog-scrollable">
    <form class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Upload Confirmation</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <input type="file" class="form-control-file" id="test-upload">
        </div>
      </div>
    </form>
  </div>
</div>

<div class="container mt-3">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#test-modal">
    Launch Modal
  </button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>