why required not working while uploading image with cropper js in php

Question

Hello guys i am building a project where i have used cropper js to crop the uploaded image everything is working fine with my codes like file is getting cropped getting uploaded to database as well but the problem is while i want to check that the file field should not be empty i am using the required but its not working i am pasting the codes that i have used till now can you guys please see what do i need to do to rectify the errors please.

HTML

<form id="partyins"  class="needs-validation" action="" method="post" enctype="multipart/form-data" novalidate>

                          
 <div class="col-md-12" style="padding:5%;">
   <input type="file" id="image" class="form-control" required>

  <input type="hidden" name="product_id" id="product_id" value="<?php if(isset($_GET['product_id'])){ echo $_GET['product_id']; } ?>">
                          

  <button type="submit" class="btn btn-success btn-block btn-upload-image mt-4" style="margin-top:2%">Upload Image</button>
  </div>
                             
</form>

JS PART

var resize = $('#upload-demo').croppie({
    enableExif: true,
    enableOrientation: true,    
    viewport: { // Default { width: 100, height: 100, type: 'square' } 
        width: 64,
        height: 64,
        type: 'circle' //square
    },
    boundary: {
        width: 300,
        height: 300
    }
});


$('#image').on('change', function () { 
  var reader = new FileReader();
    reader.onload = function (e) {
      resize.croppie('bind',{
        url: e.target.result
      }).then(function(){
        console.log('jQuery bind complete');
      });
    }
    reader.readAsDataURL(this.files[0]);
});


$("#partyins").submit(function(e){
  e.preventDefault();

  var prod_id = $('#product_id').val();

  resize.croppie('result', {
    type: 'canvas',
    size: 'viewport'
  }).then(function (img) {

    if(img == ''){
      toastr.error("Please upload a file",'Error');
    }

    $.ajax({
      url: "model/product_image/product_image.php?insertimg&imgid="+prod_id,
      type: "POST",
      data: {"image":img},
      success: function (data) {
       var res = data;
         if(res==8){
            toastr.error("Sorry! There is an error",'Error');
          }else if(res==9){
            toastr.error("Please upload a file",'Error');
          }else{
           toastr.success(data,'Update');
           $('#partyins')[0].reset();

         }
      }
    });
  });
});

PHP

if(isset($_GET['insertimg']) && isset($_GET['imgid'])){

  $id = $_GET['imgid'];

  $image = $_POST['image'];

  list($type, $image) = explode(';',$image);
  list(, $image) = explode(',',$image);

  $image = base64_decode($image);
  $image_name = 'product_id'.$id.'_'.time().'.png';
  file_put_contents("../../../upload_products/".$image_name, $image);

  if(!$image == ''){

    $sql_inst = "UPDATE $tb_products SET `p_upload`='$image_name' WHERE id='$id'";
    $res_inst = mysqli_query($conn,$sql_inst);   
    if($res_inst){
      echo "Updated Successfully";

    }else{
      echo 8;
    } 

  }else{

    echo 9;

  }

  


}

Answer 1

You can do it in this way I hope it may work

var image = $('#image').val();

  if(image == ''){
      toastr.error("Please upload a file",'Error');
    }else{

      resize.croppie('result', {
      type: 'canvas',
      size: 'viewport'
    }).then(function (img) {


      $.ajax({
        url: "model/product_image/product_image.php?insertimg&imgid="+prod_id,
        type: "POST",
        data: {"image":img},
        success: function (data) {
         var res = data;
           if(res==8){
              toastr.error("Sorry! There is an error",'Error');
            }else if(res==9){
              toastr.error("Please upload a file",'Error');
            }else{
             toastr.success(data,'Update');
             $('#partyins')[0].reset();

           }
        }
      });
    });

    }