Heic images with filepond

Question

I simply want to upload images through form on button click through FilePondPluginFileEncode. I have achieved what I want but the issue is occurring when I am using HEIC images. The issue is when the library is encoding HEIC images it is converting them into never ending encoded string. I tried to resize it somehow but resize plugin is working fine with other image types but not with HEIC images. My images are still 2.75 MB which is way big size for an image. Any idea how to handle HEIC image size on FilePondPluginFileEncode ? Can you please tell me how to simply resize my HEIC images. Like if I am uploading imges in MBs it should upload the files in KBs

Following is my code.

<?php if (isset($_POST["submit"])) {
    $files = $_POST['file'];
    $file_count = sizeof($files);
    if ($file_count > 0) {
    for ($i=0; $i < $file_count ; $i++) { 
    $image_object = stripslashes($files[$i]);
    $image_detail = json_decode($image_object, true);
    $image_code = $image_detail["id"];
    $image_name = $image_detail["name"];
    $file_name = $image_code."_".$image_name;
    $image = base64_decode($image_detail["data"]);
    file_put_contents('uploads/'.$file_name, $image);
    }
    }
    }
    
    ?>
    
    <form action="" method="post" enctype="multipart/form-data">
        
    <input type="file" name="file[]" multiple>
    
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    
    <button name="submit">Submit</button>
    
    </form>
    
    <link rel='stylesheet' href='https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css' />
    <link rel='stylesheet' href='https://unpkg.com/filepond/dist/filepond.min.css' />
    
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 
    <script src='https://unpkg.com/filepond-plugin-file-encode/dist/filepond-plugin-file-encode.min.js'></script>
    <script src='https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.min.js'></script>
    <script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script>
    <script src='https://unpkg.com/filepond-plugin-image-exif-orientation/dist/filepond-plugin-image-exif-orientation.min.js'></script>
    <script src="https://unpkg.com/filepond-plugin-image-crop/dist/filepond-plugin-image-crop.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-resize/dist/filepond-plugin-image-resize.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-transform/dist/filepond-plugin-image-transform.js"></script>
    <script src='https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js'></script>
    <script src='https://unpkg.com/filepond/dist/filepond.min.js'></script>
    
    
    <script>
        
    $(document).ready(function(){
        FilePond.registerPlugin(
        FilePondPluginFileEncode,
        FilePondPluginFileValidateSize,
        FilePondPluginFileValidateType,
        FilePondPluginImageExifOrientation,
        FilePondPluginImageCrop,
        FilePondPluginImageResize,
        FilePondPluginImageTransform,
        FilePondPluginImagePreview
        );
        FilePond.create( document.querySelector('input[type="file"]'), { 
        allowMultiple: true,
        allowReorder: true,
        allowFileEncode: true,
        maxFiles:5,
        maxParallelUploads:5,
        instantUpload:false,
        acceptedFileTypes: ['image/png', 'image/jpeg', 'image/gif', 'image/heic', 'application/pdf'],
        fileValidateTypeDetectType: validateType,
        imageResizeTargetWidth: false,
        imageResizeMode: 'cover',
        imageCropAspectRatio: "1:1",
        credits: false,
        imageTransformOutputQuality: 40,
        imageTransformOutputMimeType: 'image/jpeg'
        });
        });
    
    function validateType(source, type) {
      const p = new Promise((resolve, reject) => {
        if (source.name.toLowerCase().indexOf('.heic') !== -1) {
          resolve('image/heic')
        } else {
          resolve(type)
        }
      })
    
      return p
    }
    
    </script>