JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<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>

JavaScript

// launch the 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 upload
    var uploadSure = confirm("You sure you want to cancel your upload?");

    // confirm checks
    if (!uploadSure) {

      // stop modal closing
      e.preventDefault();

    } else {

      // continue closing modal

    }

  }

});