javascript - upload image file using ajax and codeigniter always throws upload_path error

Question

I tried to upload a file using Codeigniter and AJAX, but my form always shows an error:

the upload path isn't correct.

Model

 public function save($data)
    {
        $this->db->insert($this->table, $data);
        return $this->db->insert_id();
    }

Controller

public function ajax_add(){

        $this->_validate();

        $data = array(

                'nama'=>$this->input->post('post_nama'),
                'jenis_kelamin'=>$this->input->post('post_jk'),
                'alamat'=>$this->input->post('post_alamat'),
                'email'=>$this->input->post('post_email'),
                'telepon'=>$this->input->post('post_telepon'),
                'status'=>$this->input->post('post_status')
            );

          if(!empty($_FILES['photo']['name']))
            {
                $upload = $this->_do_upload();
                $data['photo'] = $upload;
            }

            $insert = $this->post->save($data);

            echo json_encode(array("status" => TRUE));
    }

private function _do_upload()
    {
        $config['upload_path'] = './upload/profil/';
        $config['allowed_types'] = 'gif|jpg|png';
        $config['max_size']  = 1000; //set max size allowed in Kilobyte
        $config['max_width'] = 3000; // set max width image allowed
        $config['max_height'] = 1500; // set max height allowed
        $config['file_name']  = round(microtime(true) * 1000);

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

        if(!$this->upload->do_upload('photo')) //upload and validate
        {
            $data['inputerror'][] = 'photo';
            $data['error_string'][] = 'Upload error: '.$this->upload->display_errors('',''); //show ajax error
            $data['status'] = FALSE;
            echo json_encode($data);
            exit();
        }
        return $this->upload->data('file_name');
    }

View

<form action="#" id="form" method="post" enctype="multipart/form-data">
 <div class="form-group">
      <label class="control-label">Foto</label>
      <input name="photo" type="file" id="photo">
      <span class="help-block"></span>
 </div>
  <div class="form-group">
        <button type="button" id="btnSave" onclick="insert()" class="btn btn-success">
            <span class="glyphicon glyphicon-floppy-disk"></span> Simpan
        </button>
        <button type="reset" class="btn btn-default">
            <span class="glyphicon glyphicon-floppy-disk"></span> Clear
        </button>
    </div>

Ajax

url = "<?php echo site_url('profil/ajax_add')?>";
// ajax adding data to database
var formData = new FormData($('#form')[0]);
$.ajax({
    url : url,
    type: "POST",
    data: formData,
    contentType: false,
    processData: false,
    dataType: "JSON",
    success: function(data)
    {

        if(data.status) //if success close modal and reload ajax table
        {
            alert('Data Berhasil disimpan');
            reset_form();

        }
        else
        {
            for (var i = 0; i < data.inputerror.length; i++) 
            {
                $('[name="'+data.inputerror[i]+'"]').parent().parent().addClass('has-error'); //select parent twice to select div form-group class and add has-error class
                $('[name="'+data.inputerror[i]+'"]').next().text(data.error_string[i]); //select span help-block class set text error string
            }
        }
        $('#btnSave').text('save'); //change button text
        $('#btnSave').attr('disabled',false); //set button enable 


    },
    error: function (jqXHR, textStatus, errorThrown)
    {
        alert('Error adding / update data');
        $('#btnSave').text('save'); //change button text
        $('#btnSave').attr('disabled',false); //set button enable 

    }
});
}

When I click the save button in my form, the form always shows this error:

Upload error: The upload path does not appear to be valid.

Answer 1

on public server hosting (e.g. shared hosting providers), you'll need to provide most likely the complete relative path to your upload folder, which is different to a localhost environment. Also make sure you have all permissions to write a file to that directory

you can use on a localhost environment

  $config['upload_path']   = './upload/profil'; 

but on a shared hosting, you'll need to get more specific, normally something like

  $config['upload_path']   = '/home/yourserver/public_html/upload/profil'; 

You can find this upload_path, e.g. in your accounts cPanel main page on the left column or might want to call your providers helpdesk for more info on the correct path