`$this->upload->do_upload()` is not working using ajax - php

Question

I have a project codeigniter and I will use ajax for form submission.My first problem is $this->upload->do_upload is always false. I did search for some answers but I cannot get the job done.
I tried this link to solve my problem but didnt help.
Ajax upload not working codeigniter
How to Upload files using Codeigniter and Ajax [Complete Tutorial]
Hope someone can help me.Below is my code.
View
<form id="form-register" enctype="mutlipart/form-data" action="" method="POST">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<div class="form-group form-file-upload form-file-multiple ">
<input type="file" class="inputFileHidden" name="client_img" id="client_img">
<div class="fileinput-new thumbnail img-raised">
img class="img-fluid" src="<? echo base_url();?>assets/img/person.png" alt="client-img" />
</div>
<div class="input-group mt-2">
<span class="input-group-btn">
<button type="button" class="btn btn-fab btn-round btn-primary">
<i class="material-icons">attach_file</i>
</button>
</span>
<input type="text" class="form-control inputFileVisible" placeholder="Choose client picture.." require>
</div>
</div>
</div>
</div>
Controller.php
public function register_client()
{
$validator = array('success' => false, 'messages' => array());
$config['upload_path'] = './uploads/';
$config['allowed_types'] = 'jpg|png|jpeg|gif';
$config['encrypt_name'] = TRUE;
$this->load->library('upload',$config);
if(!$this->upload->do_upload('client_img')){
$validator['success'] = false;
$validator['messages'] = $this->input->post('client_img');
}else{
$data = $this->upload->data();
//Resize and Compress Image
$config['image_library'] = 'gd2';
$config['source_image'] = './uploads/'.$data['file_name'];
$config['create_thumb'] = FALSE;
$config['maintain_ratio'] = FALSE;
$config['quality'] = '60%';
$config['width'] = 600;
$config['height'] = 400;
$config['new_image'] = './uploads/'.$data['file_name'];
$this->load->library('image_lib', $config);
$this->image_lib->resize();
$client_data = array(
'account_no' => 1000,
'client_img' => $data['file_name'],
'mname' => $this->input->post('mname'),
'gname' => $this->input->post('gname'),
'lname' => $this->input->post('lname'),
'email' => $this->input->post('email'),
'number1' => $this->input->post('number1'),
'number2' => $this->input->post('number2'),
'purok_no' => $this->input->post('purok_no'),
'barangay' => $this->input->post('barangay'),
'city' => $this->input->post('city'),
'postal_code' => $this->input->post('postal_code'),
'birthdate' => $this->input->post('birthdate'),
'gender' => $this->input->post('inlineRadioOptions'),
'info' => $this->input->post('info')
);
$insert_data = $this->claims_model->insert_client($client_data);
if($insert_data == true){
$validator['success'] = true;
$validator['messages'] = 'loan';
}else{
$validator['success'] = false;
$validator['messages'] = 'Something went wrong';
}
}
echo json_encode($validator);
}
Ajax.js
$(document).ready(function(e) {
$(".client-save").click(function(e) {
e.preventDefault();
var formdata = new FormData(document.getElementById("form-register"));
if (formdata) {
$.ajax({
type: "POST",
url: "register",
dataType: "json",
data: formdata,
processData: false,
contentType: false,
cache: false,
success: function(response) {
if (response.success == true) {
alert(response.messages);
} else {
showNotification("top", "right", response.messages);
}
}
});
}
});
});
Hope someone can site my problem for this one. I try modified the ajax code but still the
$this->upload->do_upload()
is still in false.

Answer 1

You can call the display_errors() method to help you with debugging, just add this where you return the response:
echo "<pre>";
die(var_dump( $this->upload->display_errors() ));
echo "</pre>";
Also if you are on mac/linux make sure that you have write permissions to your uploads folder, also you should check if it exists before writing to it:
if (!is_dir('uploads')) {
mkdir('./uploads', 0777, true);
}

Answer 2

as you need to append image file, you can try following code
var formData = new FormData();
formData.append('client_img', $('#client_img')[0].files[0]);