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

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]);