AJAX Javascript Alert message Not showing on input Type="file"

Question

I am passing alert validation messages on multipart form which has also file field using AJAX, JSON in codeigniter. But alert message works on every form fields except input type="file". it show alert message on perfectly on every field but not on image field. For more detail i mentioned my code below if any error please help me.

HTML Form Code ##

<div id="mes></div> 
<div class="form-group row">                                    
    <div class="col-md-3 col-xs-12">                                                                                
        <input type="text" name="title" class="form-control input-sm" placeholder="Title here">
    </div>
    <div class="col-md-4 col-xs-12">                                                                                
        <input type="text" name="detail" class="form-control input-sm" placeholder="Description here">
    </div>
    <div class="col-md-2 col-xs-12">                                                                                
        <input type="file" name="img" class="form-control input-sm">                            
    </div>
    <div class="col-md-1 col-xs-12">                                                                                
        <input type="text" name="orderby" class="form-control input-sm" placeholder="Order No">                 
    </div>
    <div class="col-md-2 col-xs-12 text-right">
        <label></label>
        <div class="btn-group">
            <a type="submit" class="btn btn-success btn-sm" id="search" title=""><i class="fa fa-search"></i> Search</a>
            <button type="submit" class="btn btn-success btn-sm" id="save" title=""><i class="fa fa-save"></i> Save</button>
        </div>                                      
    </div>
</div>                              

Javascript code

jQuery(document).ready(function($) 
{ 
    $('#formData').ajaxForm( 
    {
        beforeSubmit: function(formData, jqForm, options)
        { $("div#mes").html(''); },
        success:function(res)
        {             
            var result= $.parseJSON(res);
            $("div#mes").html('<div class="alert '+result.mes+' alert-dismissable" role="alert"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>'+result.msg+'</div>');
            if (result.mes == 'text-success') 
            {
                $('#formData').clearForm();
            }
        }           
    });   
});

Controller code

public function save(){     
    $res = array();     
    //form field validation rules
    $this->form_validation->set_rules('title', 'Title', 'required');
    $this->form_validation->set_rules('detail', 'Detail', 'required');
    $this->form_validation->set_rules('orderby', 'Set Order', 'required|is_unique[slider.orderby]');    
    //form Validation
    if (!$this->form_validation->run()) {           
        echo json_encode(array('mes' => 'alert-danger', 'msg' => 'Opps! Something wrong please check the fields below.'));          
        exit;
    }           
    // imaage configuration
    $config['upload_path'] = 'fassets/images/slider';
    $config['allowed_types'] = 'jpg|jpeg|png|gif';
    $config['file_name'] = $_FILES['img']['name'];
    //Load upload library and initialize configuration
    $this->load->library('upload', $config);            
    if(!$this->upload->do_upload('img'))
    {       
        $error = $this->upload->display_errors('', '<br>');
        echo json_encode(array('mes' => 'alert-danger', 'msg' => $error));
        exit;           
    }
    //prepare data      
    $userData = array(
        'title' => $this->input->post('title'),
        'detail' => $this->input->post('detail'),                               
        'img' =>  $this->upload->data('file_name'),
        'orderby'=> $this->input->post('orderby')
    );         
    //Pass user data to model
    $insertUserData = $this->slidermodel->insert($userData);

    //Storing insertion status message.
    if($insertUserData){
        $res = array(
            'mes' => 'alert-success',
            'msg' => "Record has been saved successfully.",
        );
        echo json_encode($res);
    } else {
        $res = array(
            'mes' => 'alert-danger',
            'msg' => "Oops! Something went wrong.",
        );
        echo json_encode($res);
    }         
}   

Answer 1

This line is your problem $config['file_name'] = $_FILES['img']['name'];

You can remove the above line as CI already does this for you!

When nothing is uploaded, and error reporting is on, you will get output that will state something like Message: Undefined index: img in your ajax call. Thus your script won't be able to parse the json response.

For future reference you can debug ajax calls by viewing its returned contents in Developer Tools > Network > {REQUEST_NAME} > Response (invaluable tool).