JetFormBuilder Handling File Size Exceedance with Popup Notifications

gistfile1.txt

Tutorials here: https://www.youtube.com/watch?v=qljahZMZcj4
_______________________________________________________



<style>
/* Modal Background */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: fixed;
    background-color: #fefefe;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    animation: fadeIn 0.5s ease-out forwards; /* Updated animation name to fadeIn */
    width: 30%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Adjusted for smooth fade in */
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/* Keyframes for fadeIn animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* OK Button */
.ok-btn {
  background-color: #0578f5;
  color: #ffffff;
  border: none;
  padding: 8px 20px;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  margin-top: 10px;
}

.ok-btn:hover {
  background-color: #000000; /* Background color on hover */
  color: #ffffff; /* Text color on hover */
}

/* Responsive adjustments for tablets and phones */
@media (max-width: 1024px) {
  .modal-content {
    width: 80%; /* Adjust the modal width for tablets */
    padding: 15px; /* Adjust padding if needed */
  }
}

@media (max-width: 767px) {
  .modal-content {
    width: 90%; /* Adjust the modal width for phones */
    padding: 10px; /* Adjust padding if needed */
  }
}
</style>

<!-- Modal HTML -->
<div id="errorModal" class="modal">
  <div class="modal-content">
    <p id="errorMessage">Error message will appear here...</p>
    <button class="ok-btn">OK</button> <!-- OK Button -->
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
    // Bind the OK button click event once, outside the change event handler
    $('.ok-btn').on('click', function() {
        $('#errorModal').hide(); // Use hide() for simplicity

        // Trigger click on the .jet-form-builder-file-upload__file-remove to remove the image
        $('.jet-form-builder-file-upload__file-remove').click();
    });

    $('.jet-form-builder-file-upload__input').on('change', function() {
        setTimeout(function() {
            var errorMessageElement = $('.jet-form-builder-file-upload__file-invalid-marker:visible');
            if (errorMessageElement.length) {
                var message = errorMessageElement.attr('title'); // Get the message from the title attribute
                $('#errorMessage').text(message); // Set the message in the popup
                $('#errorModal').show(); // Use show() to display the modal
            }
        }, 100); // Delay to allow for validation to complete
    });
});
</script>