File upload in codeigniter using ajax

Question

I am trying to upload file using ajax in codeigniter framework. My code work without using ajax but when i use ajax i got error message 'Undefined index: picture'in if($_FILES['picture']['name']).

Please check this code

View :

<form enctype="multipart/form-data" method="post">
   <div class="form-group">
      <label for="int">Picture</label>
      <input type="file" id="picture" name="picture" class="dropify" data-height="300" />
   </div>
</form>

AJAX :

var picture=new FormData( $("#picture")[0] );
var url = "<?php echo site_url('Workscontroller/create_action'); ?>";  
            $.ajax({
              url:url,
              data: {"title":title,"caption":caption,"description":description,"kategori":kategori,"picture":picture},
              dataType:"JSON",
              type:"POST",
              mimeType: "multipart/form-data",
              contentType: false,  
              cache: false,  
              processData:false,  
              success:function(data){  
               swal("Berhasil ditambahkan!", "Anda berhasil menambahkan porto folio.", "success")
               window.location.replace(data.url);
           }  
       });

Controller :

$this->load->library('upload');
   $this->_rules();
    $nmfile = "file_".time(); //nama file saya beri nama langsung dan diikuti fungsi time
    $config['upload_path'] = './works/'; //path folder
    $config['allowed_types'] = 'gif|jpg|png|jpeg|bmp'; //type yang dapat diakses bisa anda sesuaikan
    $config['max_size'] = '2048'; //maksimum besar file 2M
    $config['max_width']  = '2000'; //lebar maksimum 1288 px
    $config['max_height']  = '2000'; //tinggi maksimu 768 px
    $config['file_name'] = $nmfile; //nama yang terupload nantinya
    $this->upload->initialize($config);
    if($_FILES['picture']['name'])
    {
        if ($this->upload->do_upload('picture'))
        {
           $gbr = $this->upload->data();
           $data = array(
              'title' => $this->input->post('title',TRUE),
              'caption' => $this->input->post('caption',TRUE),
              'description' => $this->input->post('description',TRUE),
              'picture' => $gbr['file_name'],
              'kategori' => $this->input->post('kategori',TRUE),
              );
           $this->WorksModel->insert($data);
       }
   }
   else{

   }

https://stackoverflow.com/questions/10899384/uploading-both-data-and-files-in-one-form-using-ajax should be a good reference — Kelvin, Oct 02 '17 at 08:13
You can get reference from here http://www.roytuts.com/ajax-file-upload-using-codeigniter-jquery/ — Naim Malek, Oct 02 '17 at 09:07

score 0 · Accepted Answer · answered Oct 02 '17 at 14:20

The argument to formData should be an HTML <form> element. That is most easily done by giving the <form> an id attribute.

view:

<form enctype="multipart/form-data" method="post" id='myForm'>

The ajax then changes to

var formData = new FormData($("#myForm")[0]);

In the javascript you don't show how the values for title, caption, description, and kategori are set. But they are clearly other <input> elements in the form. You probably do not need to capture these values separately because all form inputs (including FILE type inputs) are captured in var formData. That means that the ajax data option can be rewritten from

data: {"title":title,"caption":caption,"description":description,"kategori":kategori,"picture":picture},

to

data: formData,

The line if($_FILES['picture']['name']) should work now.

score 0 · Answer 2 · answered Oct 03 '17 at 06:09

//update like this

var url = "";
$.ajax({ url:url, data:"title":title,"caption":caption,"description":description,"kategori":kategori,"picture":picture}, dataType:"JSON", type:"POST", mimeType: "multipart/form-data", contentType: false,
async: false, cache: false, contentType: false, processData: false,
success:function(data){
swal("Berhasil ditambahkan!", "Anda berhasil menambahkan porto folio.", "success") window.location.replace(data.url); }
});

File upload in codeigniter using ajax

2 Answers2

Linked