updated upload image functionality

hotel_booking/admin/ajax/settings_crud.php

@@ -50,5 +50,25 @@
         echo $res;
     }
 
+    if(isset($_POST['add_member'])){
+        $frm_data = filteration($_POST);
+        $img_r = uploadImage($_FILES['image'], MANAGEMENT_FOLDER);
+
+        if($img_r == 'inv_img'){
+            echo $img_r;
+        }
+        else if($img_r == 'inv_size'){
+            echo $img_r;
+        }
+        else if($img_r == 'upd_failed'){
+            echo $img_r;
+        }
+        else{
+            $q = "INSERT INTO `team_detail`(`name`, `image`) VALUES (?,?)";
+            $values = [$frm_data['name'], $img_r];
+            $res = insert($q, $values, 'ss');
+            echo $res;
+        }
+    }
 
 ?>

hotel_booking/admin/components/utils.php

@@ -1,5 +1,8 @@
 <?php 
     
+    define('UPLOAD_IMAGE_PATH', $_SERVER['DOCUMENT_ROOT'].'/images/admin/');
+    define('MANAGEMENT_FOLDER', 'management/');
+
     function adminLogin(){
         session_start();
         if(!(isset($_SESSION['adminLogin']) && $_SESSION['adminLogin'] == true)){
@@ -28,4 +31,26 @@
         alert;
     }
 
+    function uploadImage($image, $folder){
+        $valid_mime = ['image/jpeg', 'image/png', 'image/webp', 'image/jpg'];
+        $img_mime = $image['type'];
+
+        if(!in_array($img_mime, $valid_mime)){
+            return 'inv_img';
+        } 
+        else if(($image['size']/(1024*1024)) > 2){
+            return 'inv_size';
+        }
+        else{
+            $ext = pathinfo($image['name'], PATHINFO_EXTENSION);
+            $rname = 'IMG_'.random_int(11111, 99999).".$ext";
+            $img_path = UPLOAD_IMAGE_PATH.$folder.$rname;
+            if(move_uploaded_file($image['tmp_name'], $img_path)){
+                return $rname;
+            } else{
+                return 'upd_failed';
+            }
+        }
+    }
+    
 ?>

hotel_booking/admin/settings.php

@@ -233,10 +233,6 @@
                                         <label class="form-label" style="font-weight: 600;">Name</label>
                                         <input type="text" name="member_name" id="member_name_input" class="form-control shadow-none" required/>
                                     </div>
-                                    <div class="mb-3">
-                                        <label class="form-label" style="font-weight: 600;">Position</label>
-                                        <input type="text" name="member_position" id="member_position_input" class="form-control shadow-none" required/>
-                                    </div>
                                     <div class="mb-3">
                                         <label class="form-label" style="font-weight: 600;">Image</label>
                                         <input type="file" name="member_img" id="member_img_input" accept="[.jpg, .png, .webp, .jpeg]" class="form-control shadow-none" required/>
@@ -267,7 +263,6 @@
         
         let team_setting_form = document.getElementById('team_setting_form');
         let member_name_input = document.getElementById('member_name_input');
-        let member_position_input = document.getElementById('member_position_input');
         let member_img_input = document.getElementById('member_img_input');
 
         function get_general(){
@@ -409,8 +404,35 @@
         function add_member(){
             let data = new FormData();
             data.append('name',member_name_input.value);
-            data.append('position',member_position_input.value);
             data.append('image',member_img_input.files[0]);
+            data.append('add_member', '');
+
+            let xhr = new XMLHttpRequest();
+            xhr.open("POST", "ajax/settings_crud.php", true);
+
+            xhr.onload = function(){
+                console.log(this.responseText);
+                var myModal = document.getElementById('team-setting');
+                var modal = bootstrap.Modal.getInstance(myModal);
+                modal.hide()
+
+                if(this.responseText == 'inv_img'){
+                    alert('error', 'Fail to updated image (only jpg, jpeg, png, and webp are allowed)');
+                }
+                else if(this.responseText == 'inv_size'){
+                    alert('error', 'Fail to updated image (image size should be less than 2MB)');
+                }
+                else if(this.responseText == 'upd_failed'){
+                    alert('error', 'Fail to upload image');
+                }
+                else{
+                    alert('success', 'Your data is uploaded');
+                    member_name_input.value ='';
+                    member_image_input.value = '';
+                }
+            }
+
+            xhr.send(data);
         }