Mini Shell

<?php
include("config.php");
$conn = dbconnect();

$id = $_GET['id'];

$today = date('Y-m-d');
?>
<h3>Slider - <?php echo $id; ?></h3>
<?php
$content_query = "SELECT * FROM tb1_slider WHERE slider_id = '$id'";
$content_res = mysqli_query($conn, $content_query);
$content_row = mysqli_fetch_object($content_res);
$slider_id = $content_row->slider_id;
$status = $content_row->status;
$slider_img = $content_row->slider_img;
?>
<form class="edit-form" id="editForm" enctype="multipart/form-data">
  <div class="col-md-12">
    <div class="card-block">
      <input type="hidden" name="type" value="update">
      <input type="hidden" name="slider_id" value="<?php echo $slider_id ?>">

      <div class="form-group row">
        <label class="col-md-3 col-form-label">Change Slider</label>
        <div class="col-md-9">
          <input type="file" name="files" id="filer_input_single">
        </div>
      </div>

    </div>
  </div>
  <div class="col-md-12 text-center">
    <button type="submit" class="btn btn-success text-bold" id="sub-btn" style="width: -webkit-fill-available;">Submit</button>
  </div>
</form>
<!-- jquery file upload js -->
<script src="assets/pages/jquery.filer/js/jquery.filer.min.js"></script>
<script src="assets/pages/filer/custom-filer.js" type="text/javascript"></script>
<script src="assets/pages/filer/jquery.fileuploads.init.js" type="text/javascript"></script>
<script src="assets/validation/jquery-validation/jquery.validate.min.js"></script>
<script src="assets/css/validation/form-validation.js"></script>
<script type="text/javascript">
  // initialize validate plugin on the form
  $("#editForm").validate({
    errorPlacement: function(error, element) {
      var ele = $(element),
        err = $(error),
        msg = err.text();
      if (msg != null && msg !== "") {
        ele.tooltipster('content', msg);
        ele.tooltipster('open'); //open only if the error message is not blank. By default jquery-validate will return a label with no actual text in it so we have to check the innerHTML.
      }
    },
    unhighlight: function(element, errorClass, validClass) {
      $(element).removeClass(errorClass).addClass(validClass).tooltipster('close');
    },

    submitHandler: function(form) { // for demo
      var form = $('#editForm')[0];
      var formData = new FormData(form);
      event.preventDefault();
      var imagvalid = true;
      const file = $('#filer_input_single')[0].files[0];

      if (file) {
        if (file.size > 500 * 1024) {
          imagvalid = false;
          swal({
            title: 'File too large!',
            text: "Please upload an image under 500 KB.",
            icon: 'warning',
            buttons: {
              confirm: {
                text: 'Okay',
                value: true,
                visible: true,
                className: 'btn btn-primary',
                closeModal: true
              }
            },
            closeOnEsc: false,
            closeOnClickOutside: false
          });
        }
      }
      if (imagvalid) {

        $("#sub-btn").attr("disabled", true);
        $.ajax({
          type: 'POST',
          url: 'ajax/slider_action',
          processData: false,
          contentType: false,
          dataType: "json",
          data: formData,
          success: function(data) {
            if (data == 'done') {
              swal({
                title: 'Updated Successfully!',
                text: "Slider has been successfully Updated",
                icon: 'success',
                confirmButtonColor: '#3f51b5',
                closeOnEsc: false,
                closeOnClickOutside: false,
                buttons: {
                  confirm: {
                    text: "Okay",
                    value: true,
                    visible: true,
                    className: "btn btn-primary",
                    closeModal: true
                  }
                }
              }).then((value) => {
                if (value == true) {
                  location.reload();
                }
              });
            }
          },
          error: function(data) {
            swal({
              title: 'Internal Sever Error!',
              text: "Try again",
              icon: 'warning',
              closeOnEsc: false,
              closeOnClickOutside: false,
            })
          },
        });
      }
    }
  });
</script>