upload image file using ajax and codeigniter always throws upload_path error
<p>I tried to upload a file using Codeigniter and AJAX, but my form always shows an error: </p>

<blockquote>
  <p>the upload path isn't correct.</p>
</blockquote>

<p><strong>Model</strong></p>

<pre><code> public function save($data)
    {
        $this-&gt;db-&gt;insert($this-&gt;table, $data);
        return $this-&gt;db-&gt;insert_id();
    }
</code></pre>

<p><strong>Controller</strong></p>

<pre><code>public function ajax_add(){

        $this-&gt;_validate();

        $data = array(

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

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

            $insert = $this-&gt;post-&gt;save($data);

            echo json_encode(array("status" =&gt; 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-&gt;load-&gt;library('upload', $config);

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

<p><strong>View</strong></p>

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

<p>
<strong>Ajax</strong></p>

<pre><code>url = "&lt;?php echo site_url('profil/ajax_add')?&gt;";
// 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 &lt; 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 

    }
});
}
</code></pre>

<p>When I click the save button in my form, the form always shows this error: </p>

<blockquote>
  <p>Upload error: The upload path does not appear to be valid.</p>
</blockquote>