Images names not inserting in WordPress Database from Dynamic Add / Remove field

I have created dynamic add / remove fields in which one is file upload fields. Everything is working fine. But there is one problem. When I add images in file fields and fill other details in other fields the data doesn’t get inserted in database.

And If I fill other details in other fields and keep the image upload file field empty then the data gets inserted in database.

I am not getting as to why the script is weirdly working… Plz help me out with a solution… Thanks

Following is the code:

<?php

if ( isset( $_POST['project_draft0'] ) ) {

$user_id = get_current_user_id();

$member_details->member_image = array_map( 'sanitize_file_name', $_FILES['member_image']['name'] );
$member_details->member_name = array_map( 'sanitize_text_field', $_POST['member_name'] );
$member_details->member_email = array_map( 'sanitize_text_field', $_POST['member_email'] );
$member_details->member_role = array_map( 'sanitize_text_field', $_POST['member_role'] );
$member_details->member_fb = array_map( 'sanitize_text_field', $_POST['member_fb'] );

$member_details_encode = wp_json_encode( $member_details );

  global $wpdb;

  $member_result = $wpdb->insert( 'oc_project_members',

         array( 

              'author_id'      => $user_id,
              'member_details' => $member_details_encode

              ),

         array( 

              '%d',
              '%s'

      )

    );

}

?>

<form method="POST"  enctype="multipart/form-data">

<div class="card">
  <div class="card-header text-center">
    <b>Team Members</b>
  </div>
  <div class="card-body">

  <div class="row">

    <div class="col-4">

<img src="<?php echo esc_url( site_url('/wp-content/img/blank-image.png') ); ?>" class="img-thumbnail" id="output_member0">

<br><br>

<label class="btn btn-success btn-block btn-file">Select Image<input type="file" name="member_image[]" onchange="preview_member(event, 0)" style="display: none;"></label>

    </div>

    <div class="col-8">

  <div class="form-group">
    <label for="member_name"><b>Member Name</b> <b style="color:#FF0000;">*</b></label>
    <input type="text" class="form-control" name="member_name[]">
  </div>
  <div class="form-group">
    <label for="member_email"><b>Email Address</b> <b style="color:#FF0000;">*</b></label>
    <input type="text" class="form-control" name="member_email[]">
  </div>
  <div class="form-group">
    <label for="member_role"><b>Role in Project</b> <b style="color:#FF0000;">*</b></label>
    <input type="text" class="form-control" name="member_role[]">
  </div>
  <div class="form-group">
    <label for="member_fb"><b>Facebook Username</b> <b style="color:#FF0000;">*</b></label>
    <input type="text" class="form-control" name="member_fb[]">
  </div>

    </div>

  </div>

  <div id="member-fields">

  </div>

<button type="button" class="btn btn-success btn-block" id="add-member-fields">Add Member</button>

  </div>
</div>

<input class="btn btn-warning" type="submit" name="project_draft0" value="Draft" style="border-radius: 0px;">

</form>

<script type="text/javascript">

var i = 0;

function preview_member(event, inp) {
  var reader = new FileReader();
  console.log(inp);
  reader.onload = function() {
    var output = document.getElementById('output_member' + inp);
    output.src = reader.result;
  };

  reader.readAsDataURL(event.target.files[0]);
}

jQuery(document).ready(function($) {
  //fadeout selected item and remove
  $(document).on("click", '#remove-member-fields', function(event) {
    event.preventDefault();
    $(this)
      .parent()
      .fadeOut(300, function() {
        $(this).empty();
        return false;
      });
  });

  //add input
  $('#add-member-fields').click(function() {
    i++;

    var rows = <code><div class=&quot;all-member-fields&quot;><hr><div class=&quot;row&quot;><div class=&quot;col-4&quot;><img src=&quot;<?php echo esc_url( site_url('/wp-content/img/blank-image.png') ); ? />&quot; class=&quot;img-thumbnail&quot; id=&quot;output_member${i}&quot;><br><br><label class=&quot;btn btn-success btn-block btn-file&quot;>Select Image<input type=&quot;file&quot; name=&quot;member_image[]&quot; onchange=&quot;preview_member(event, ${i})&quot; style=&quot;display: none;&quot;></label></div><div class=&quot;col-8&quot;><div class=&quot;form-group&quot;><label for=&quot;member_name&quot;><b>Member Name</b> <b style=&quot;color:#FF0000;&quot;>*</b></label><input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;member_name[]&quot;></div><div class=&quot;form-group&quot;><label for=&quot;member_email&quot;><b>Email Address</b> <b style=&quot;color:#FF0000;&quot;>*</b></label><input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;member_email[]&quot;></div><div class=&quot;form-group&quot;><label for=&quot;member_role&quot;><b>Role in Project</b> <b style=&quot;color:#FF0000;&quot;>*</b></label><input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;member_role[]&quot;></div><div class=&quot;form-group&quot;><label for=&quot;member_fb&quot;><b>Facebook Username</b> <b style=&quot;color:#FF0000;&quot;>*</b></label><input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;member_fb[]&quot;></div></div></div><button type=&quot;button&quot; class=&quot;btn btn-danger&quot; id=&quot;remove-member-fields&quot; style=&quot;float: right;&quot;>Remove Member</button><br><br></div></code>;

    $(rows)
      .fadeIn("slow")
      .appendTo('#member-fields');
    return false;
  });
});

</script>