Sindbad~EG File Manager

//  Here Delegate Image Upload Start
    var croppie;
    var oneMB   = 1048576
   
    function removeImage()
    {
        $("#file_exists").val('');
        $("#files").val(''); 
        $("#files").show();
        $("#image_container").attr("src",'');
        $("#image_container").hide();
        $("#Imageupload").show();
        $("#Imageupload").removeClass('d-none');
        $("#delegate_image_base64").val('');

        $("#ImageRemove").addClass('d-none');
        $("#image_deleted").val(1);
        $("#uptade_btn").show();
        $("#del_image_container").hide();
        $("#delegate_image").hide();
        $("#del_image_container").attr("src",'');
        $("#is_remove_del_img").val('1');
    }


    function croppie_rotate(degree) {
      croppie.rotate(degree)
    }


   $("#district_btn").on("click", function () {
        $("#show_image").attr("src",'');
        $("#show_image").hide();
        $("#cropped-image").hide();


        $("#del_image_container").attr("src",'');
        $("#file_exists").val('');
        $("#files").val(''); 
        $("#image_data").val('');
        $("#del_image_container").hide();
        $("#ImageRemove").hide();
        $("#ImageRemove").removeClass('d-none');

        $("#upload-button").html("Apply");
        $("#upload-button").attr("disabled",false);
        $("#is_remove_del_img").val('');
        

    }); 

   function clearfields() {
      // body...
       $("#addMsg").hide();
        $("#addmsg").text('');
        $("#ErrorMsg").hide();
         $("#errormsg").text('');
        $("#successMsg").hide();
        
        $("#full_name").text('');
        $("#email").text('');
        $("#mobile").text('');
        $("#role").val('');
    }
    
    function cleardata() {
      // body...
        $("#full_name").text('');
        $("#email").text('');
        $("#mobile").text('');
        $("#role").val('');
    }


    
    function image_upload() {
        
        var ext = $('#files').val().split('.').pop().toLowerCase();
        $("#delegate_image_ext").val(ext);

         if($.inArray(ext, ['gif','jpg','jpeg','pdf','png','jfif','tif','tiff']) == -1) 
         {
            clear();
            alert('Invalid file type');
            
         }
         else{
        
            var user_profile = $("#files")[0].files[0];
            if($('#files')[0].files[0].size > (oneMB*3))
           {
             alert('File Must less than 3MB');
             clear();
             return false;
           } 
           else
           {
              $("#delegate_image").show(); 
               $("#delegate_image").removeClass('d-none');
               $("#del_image_container").hide();
               $("#croppie-container").show();
               
               $("#Imageupload").hide();
           }
           
            var reader = new FileReader();
            reader.onload = function () {
                $("#show_image").show();
                $("#show_image").attr("src", reader.result);
                if (croppie) {
                    croppie.destroy();
                }
                // Initialize Croppie
                croppie = new Croppie(document.getElementById("show_image"), {
                    viewport: { width: 138, height: 158 },
                    boundary: { width: 210, height: 240 },
                    enableOrientation: true,
                });
                // Bind Croppie to existing image
                croppie
                    .bind({
                        url: $("#show_image").attr("src"),
                        orientation: 1,
                    })
                    .then(function () {
                        croppie.element.addEventListener("update", function () {
                            croppie.result("base64").then(function (data) {
                                // Create new image element and update the existing one
                                var croppedImage = document.getElementById("cropped-image");
                                if (!croppedImage) {
                                    croppedImage = new Image();
                                    croppedImage.id = "cropped-image";
                                    $("#cropped-image-container").append(croppedImage);
                                    $("#show_image").attr("src",'');
    
                                    $("#show_image").hide();
                                    $("#upload-button").html("Apply");
                                    $("#upload-button").attr("disabled",false);
                                }
                                croppedImage.src = data;
                            });
                        });
                    });
            };
            reader.readAsDataURL(user_profile);
         }    
    }

    function apply_btn() {
        var file_name   = $("#files").val().split("\\").pop();
        $("#upload-button").html("Please Wait..");
        $("#upload-button").attr("disabled",true);
        
             
      croppie.result("base64").then(function (data) {
         var image_data = data;
         $("#delegate_image_base64").val(image_data);
         
          var croppedImage = document.getElementById("cropped-image");
          if (!croppedImage) {
              croppedImage = new Image();
              croppedImage.id = "cropped-image";
              $("#cropped-image-container").append(croppedImage);
              $("#show_image").attr("src", "");
              $("#show_image").hide();

              $("#del_image_container").attr("src",image_data);
              $("#del_image_container").show();


              
          }
          croppedImage.src = data;
          
      });
      $("#is_remove_del_img").val('0');
      $("#delegate_image").hide();
      $("#croppie-container").hide();
      $("#delegate_image_modal").hide();
      $("#del_image_container").hide();
      $("#ImageRemove").removeClass('d-none');
      $("#ImageRemove").show();
    } 
    
    //  Here Delegate Image Upload End