title: using modal add image in codeigniter with JQuery ajax
body: <p>how could I have an upload image directly to my database With moving into local directory using codeigniter Framework with JQuery &amp; AJAX? here's my codes where I used an AJAX code for my modal in HTML and Controller to my functions. can you please help me to fix it?</p>
  
  <blockquote>
    <p>Here's the controller functions</p>
  </blockquote>
  
  <pre><code>public function ajax_edit($about_id)
  {
      $data = $this-&gt;person-&gt;get_by_id($about_id);
      echo json_encode($data);
  }
  
  public function ajax_add()
  {
  
      $data = array(
              'about_details' =&gt; $this-&gt;input-&gt;post('about_details'),
              'image' =&gt; $this-&gt;input-&gt;post('image'),
  
          );
      $insert = $this-&gt;person-&gt;save($data);
      echo json_encode(array("status" =&gt; TRUE));
  }
  
  public function ajax_update()
  {
      $data = array(
              'about_details' =&gt; $this-&gt;input-&gt;post('about_details'),
              'image' =&gt; $this-&gt;input-&gt;post('image'),
  
          );
      $this-&gt;person-&gt;update(array('about_id' =&gt; $this-&gt;input-&gt;post('about_id')), $data);
      echo json_encode(array("status" =&gt; TRUE));
  }
  </code></pre>
  
  <blockquote>
    <p>here's my AJAX</p>
  </blockquote>
  
  <pre><code>  function add_person()
  {
    save_method = 'add';
    $('#form')[0].reset(); // reset form on modals
    $('#myModal').modal('show'); // show bootstrap modal
    $('.modal-title').text('Add About US'); // Set Title to Bootstrap modal title
  }
  
  function edit_person(about_id)
  {
    save_method = 'update';
    $('#form')[0].reset(); // reset form on modals
  
    //Ajax Load data from ajax
    $.ajax({
      url : "&lt;?php echo site_url('about/ajax_edit/')?&gt;/" + about_id,
      type: "GET",
      dataType: "JSON",
      success: function(data)
      {
  
          $('[name="about_id"]').val(data.about_id);
          $('[name="about_details"]').val(data.about_details);
          $('[name="file"]').val(data.image);
  
  
  
          $('#myModal').modal('show'); // show bootstrap modal when complete loaded
          $('.modal-title').text('Edit Person'); // Set title to Bootstrap modal title
  
      },
      error: function (jqXHR, textStatus, errorThrown)
      {
          alert('Error get data from ajax');
      }
  });
  }
  
  function reload_table()
  {
    table.ajax.reload(null,false); //reload datatable ajax 
  }
  
  function save()
  {
    var url;
    if(save_method == 'add') 
    {
        url = "&lt;?php echo site_url('about/ajax_add')?&gt;";
    }
    else
    {
      url = "&lt;?php echo site_url('about/ajax_update')?&gt;";
    }
  
     // ajax adding data to database
        $.ajax({
          url : url,
          type: "POST",
          data: $('#form').serialize(),
          dataType: "JSON",
          success: function(data)
          {
             //if success close modal and reload ajax table
             $('#myModal').modal('hide');
             reload_table();
          },
          error: function (jqXHR, textStatus, errorThrown)
          {
              alert('Error adding / update data');
          }
      });
  }
  </code></pre>
  
  <blockquote>
    <p>and here's my form in html</p>
  </blockquote>
  
  <pre><code>&lt;div class="modal fade" id="myModal" role="dialog"&gt;
  &lt;div class="example-modal"&gt;
      &lt;div class="modal"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content "&gt;
                  &lt;div class="modal-header bg-green-gradient"&gt;
                      &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
                      &lt;h4 class="modal-title "&gt;  &lt;i class="fa fa-info-circle"&gt;&lt;/i&gt; Add info on About us&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body form"&gt;
  
                    &lt;form action="#" id="form"&gt;
                     &lt;input type="hidden" value="" name="about_id"/&gt; 
                          &lt;!--                            &lt;div class="form-group has-feedback "&gt;
                                                          &lt;label&gt;Date&lt;/label&gt;
                                                          &lt;input type="date" id="date" class="form-control" input-sm placeholder="Date"/&gt;
                                                      &lt;/div&gt;--&gt;
                          &lt;div class="form-group has-feedback"&gt;
                              &lt;label&gt;About Details&lt;/label&gt;
                              &lt;input type="text" id="title" name="about_details" class="form-control" input-sm placeholder="About Details"/&gt;
                          &lt;/div&gt;
  
  
  
  
                          &lt;!-- Description --&gt;
  
                      &lt;!--    &lt;div class="form-group has-feedback"&gt;
                             &lt;label&gt;Image&lt;/label&gt;
                              &lt;?php $attrib = array('type'=&gt;'text','name'=&gt;'image','class'=&gt;'form-control','id'=&gt;'file'); ?&gt;
          &lt;?php echo form_upload( $attrib,set_value('image')); ?&gt;
  </code></pre>
  
  <p>--></p>
  
  <pre><code>                                               &lt;div class="form-group has-feedback"&gt;
                                                          &lt;label&gt;Upload a Photo&lt;/label&gt;
                                                          &lt;input type="file" id="file" name="file" class="form-control" input-sm placeholder="upload"/&gt;
                                                      &lt;/div&gt;
  
  
  
  
  
                      &lt;/form&gt;   
  
                      &lt;div class="modal-footer"&gt;
                          &lt;button type="button"  class="btn btn-default pull-left" data-dismiss="modal"&gt;Close&lt;/button&gt;
                            &lt;button type="button" id="btnSave" class="btn btn-success"  aria-hidden="true" onclick="save()"&gt;Save&lt;/button&gt;
  </code></pre>
  
  <p>the above problem, I can upload my image but it can't save the file to the database when I save the form</p>