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>
  • 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 '19 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 '19 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 '19 at 13:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.