you did not select a file to upload. codeigniter ajax

Question

Model :

public function insertSuratMasuk($filename)
{
    $data = array('nomor_surat'     => $this->input->post('nosurat'),
                  'tgl_kirim'       => $this->input->post('tglkirim'),
                  'tgl_terima'      => $this->input->post('tglterima'),
                  'pengirim'        => $this->input->post('pengirim'),
                  'penerima'        => $this->input->post('penerima'),
                  'perihal'         => $this->input->post('perihal'),
                  'file_surat'      => $filename,
                  'status'          => 'proses'
                 );

    $this->db->insert('surat_masuk', $data);

    if($this->db->affected_rows() == 0){
        return false;
    }

    return true;
}

Controller :

public function addSuratMasuk()
{
    $config['allowed_types'] = 'pdf|doc|docx';
    $config['upload_path']   = './uploads/';
    $config['max_size']      = 4000;

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

    $r = array('status' => true, 'error' => '');

    if($this->upload->do_upload('suratMasuk')){
        $upload = $this->upload->data();
        $filename = $upload['file_name'];
        if($this->surat_masuk_m->insertSuratMasuk($filename) == true){
            echo json_encode($r);
        } else {
            $r['status'] = false;
            echo json_encode($r);
        }
    } else {
        $r['error'] = $this->upload->display_errors();
        $r['status'] = false;
        echo json_encode($r);
    }
}

View :

<form class="form-horizontal" enctype="multipart/form-data" id="tambahSuratMasuk">
        <div class="modal-body form">
           <div class="form-body">
              <div class="form-group">
                 <label class="control-label col-md-3">Nomor Surat</label>
                 <div class="col-md-9">
                    <input type="text" name="nosurat" class="form-control" placeholder="Nomor Surat" required>
                 </div>
              </div>
              <div class="form-group">
                 <label class="control-label col-md-3">Tgl. Kirim</label>
                 <div class="col-md-9">
                    <input type="date" name="tglkirim" class="form-control" required> 
                 </div>
              </div>
              <div class="form-group">
                 <label class="control-label col-md-3">Tgl. Terima</label>
                 <div class="col-md-9">
                    <input type="date" name="tglterima" class="form-control" required> 
                 </div>
              </div>
              <div class="form-group">
                 <label class="control-label col-md-3">Pengirim</label>
                 <div class="col-md-9">
                    <input type="text" name="pengirim" class="form-control" placeholder="Pengirim" required> 
                 </div>
              </div>
              <div class="form-group">
                 <label class="control-label col-md-3">Penerima</label>
                 <div class="col-md-9">
                    <input type="text" name="penerima" class="form-control" placeholder="Penerima" required> 
                 </div>
              </div>
              <div class="form-group">
                 <label class="control-label col-md-3">Perihal</label>
                 <div class="col-md-9">
                    <input type="text" name="perihal" class="form-control" placeholder="Perihal" required> 
                 </div>
              </div>
              <div class="form-group">
                 <label class="control-label col-md-3">Unggah Surat (*.pdf)</label>
                 <div class="col-md-9">
                    <input type="file" name="suratMasuk" class="form-control" required> 
                 </div>
              </div>
           </div>
        </div>
        <div class="modal-footer">
           <button type="button" name="close" id="buttonClose" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
           <input type="submit" name="submit" value="Save" class="btn btn-primary" onclick="insertSuratMasuk(); ">
     </form>

Javascript :

function insertSuratMasuk() {
  event.preventDefault();
  data = $('#tambahSuratMasuk').serialize();
  $.ajax({
    url: '<?php echo base_url('index.php/surat_masuk/addSuratMasuk'); ?>',
    type: 'POST',
    dataType: 'json',
    data: data,
    success: function (r) {
      if(r.error == ''){
        if(r.status == true){
          swal('Insert data success', '', 'success');
        } else if (r.status == false) {
          swal('Insert data failed', '', 'danger')
        }
      } else {
        swal('Insert data failed', r.error, 'warning')
      }
    }
  })
}

I get an error when I want to code how to upload file, but when a file going to uploaded, something went wrong, and I got this error :

you did not select a file to upload

I don't know why, I think all of my code was clear. I'm confused. Anyone can help me? I'm very hopefully if anyone can fix my code. Thank you everyone.

Answer 1

You can't directly upload file data using ajax, but you could use FormData() for the same purpose :

$.ajax({
   ...
   data : new FormData($('#tambahSuratMasuk')), 
   ...
})