0

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 = `<div class="all-member-fields"><hr><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_member${i}"><br><br><label class="btn btn-success btn-block btn-file">Select Image<input type="file" name="member_image[]" onchange="preview_member(event, ${i})" 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><button type="button" class="btn btn-danger" id="remove-member-fields" style="float: right;">Remove Member</button><br><br></div>`;

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

</script>
3
  • Your code works good for me. So maybe it's your table structure. Try echo $wpdb->last_error; after you call $wpdb->insert() - or before you call it, add $wpdb->show_errors();.
    – Sally CJ
    May 2, 2019 at 17:35
  • @SallyCJ The code works well only when we add less than 3 images. As an when we add 4 or more images it doesn't work...
    – Minesh
    May 3, 2019 at 7:58
  • No, @Minesh. Your code does work whether I submit no images, 3 images, 4 images or even more. So once again, check your table structure, check for any database errors, and if necessary, disable plugins and/or try default theme.
    – Sally CJ
    May 5, 2019 at 13:19

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.