PHP - Codeigniter Validation using json

Question

I have a fields and every field have a validation. all validation are working.

But the problem is in my field that will upload file. Even though i already put an image file still it will validate that I must upload an image.

im using sweetalert to show the validation errors.

MY CONTROLLER

public function saveproducts(){
    $config['upload_path'] = 'uploads/products';   
    $config['allowed_types'] = 'jpg|png|jpeg';
    $config['max_size'] = '2048000';
    $config['overwrite'] = TRUE;
    //$config['file_name'] = $this->input->post('prod_name');

    $this->load->library('upload', $config);

    $this->form_validation->set_rules('userfile', 'Product Image','callback_rulesprodimage');

    if($this->form_validation->run()==FALSE){
        echo json_encode(validation_errors());
    }else{

        $products = array(
            'product_image' => $this->input->post('userfile'),
            'upload_data' => $this->upload->data(),
            );

        $this->CrudModel->insertproductdata($products);

        echo json_encode(1);
    }

}

public function rulesprodimage(){
    if (isset($_FILES['userfile']) && !empty($_FILES['userfile']['name'])){
        if ($this->upload->do_upload('userfile')){
        return true;
        }else{
        $this->form_validation->set_message('rulesprodimage', $this->upload->display_errors());
        return false;
        }
    }else{
      // throw an error because nothing was uploaded
      $this->form_validation->set_message('rulesprodimage', "You must upload an image!");
      return false;
    }
}

VIEW

<form method="post" enctype="multipart/form-data" id="prod-submit">
<div class="form-group">
<label class="control-label">Product Image <span id="required"> * </span></label>
<input type="file" name="userfile" class="form-control">
</div>
</form>

Javascript

$(document).ready(function(){
$('#prod-submit').on('submit',function(e) { 

$.ajax({
    url: base_url+'adminpage/saveproducts/',

    data:$(this).serialize(),
    type:'POST',
    success:function(data){

      var result = JSON.parse(data); 
        if(result===1){ 
            console.log(result);
            document.location.href = base_url+"adminpage/products/"
        }
        else{
           swal({
                type: 'error',
                html: result,

              }).done();
        }
    },
    error:function(data){
    swal("Oops...", "Something went wrong :(", "error");

    }
  });
  e.preventDefault(); 
});

});

Answer 1

The file doesn't go through ajax just like that, so $_FILES is empty and CI doesn't see. You can transport file without page reloading with FormData object. Read more on this question. Watch out also on browser compatibility, because this api works on modern browsers and ie10+.

I usually do this with jquery plugins. There are many. One of the most popular is https://github.com/blueimp/jQuery-File-Upload , other for example: http://malsup.com/jquery/form/#file-upload

Answer 2

Use FormData instead of serialize to upload the file, although I do warn it doesn't work for IE9 and below, you can read more about FormData here.

$(document).ready(function(){
$('#prod-submit').on('submit',function(e) { 

// Create a new FormData with your form selector inside.   

var formdata = new FormData($('form')[0]); 

$.ajax({
    url: base_url+'adminpage/saveproducts/',

    data:formdata,
    type:'POST',
    success:function(data){

      var result = JSON.parse(data); 
        if(result===1){ 
            console.log(result);
            document.location.href = base_url+"adminpage/products/"
        }
        else{
           swal({
                type: 'error',
                html: result,

              }).done();
        }
    },
    error:function(data){
    swal("Oops...", "Something went wrong :(", "error");

    }
  });
  e.preventDefault(); 
});