CodeIgniter, Jquery Ajax, Form Submission and File Upload

Question

I am working on a website using CodeIgnitor Framework.

Question is related with CodeIgniter, Jquery Ajax, Form Submission and File Upload

MY HTML is : Given only relevant section of HTML below

  <form method="post" action="" id="upload_file" enctype="multipart/form-data">
  <div id="inner2" style="display:none">
    <div class="trainingcontent" style="height:400px;">
      <div class="chaptername" >
        <p>Chapter Name</p>
        <input type="text" id="cname" name="cname" class="awesome-text-box" />
        <input type="hidden" id="training_id" name="training_id" />
      </div>
      <div class="trainingurl">
        <p>Training Video</p>
        <input type="text" id="video_url" name="video_url" class="awesome-text-box" placeholder="Paste your video URL here..."/>
      </div>
      <div class="uploadpdf">
        <p>Upload PDF</p>
        <a href="#"><div class="uploadbutton">
          <div class="uploadtext"> <input type="file" name="userfile" id="userfile" size="20" />UPLOAD PDF </div>
        </div></a>
      </div>
</form>

MY JQUERY CODE is

function abc(){

var training_id = $('#training_id').attr('value');
var cname = $('#cname').attr('value');
var video_url = $('#video_url').attr('value');

$.ajax({  
    type: "POST",  
    url: "../chapters/create",  
    data: "training_id="+training_id+"&cname="+cname+"&video_url="+video_url,
    success: function(returned_html){
        echo returned_html;
    }
});

}//end of function abc

How do I pass input type file data to my controller?

I have tried various approaches but nothing works.

Answer 1

I created similar functionality using JS's formData object in codeigniter

Reference link: https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects#Sending_files_using_a_FormData_object

Sample code:

function abc(){
   // create a FormData Object using your form dom element
   var form = new FormData(document.getElementById('upload_file'));
   //append files
   var file = document.getElementById('userfile').files[0];
    if (file) {   
        form.append('userfile', file);
    }
    //call ajax 
      $.ajax({
        url: "../chapters/create",
        type: 'POST',
        data: form,             
        cache: false,
        contentType: false, //must, tell jQuery not to process the data
        processData: false, //must, tell jQuery not to set contentType
        success: function(data) {
            console.log(data);
        },
        complete: function(XMLHttpRequest) {
            var data = XMLHttpRequest.responseText;
            console.log(data);
        },
        error: function() {
            alert("ERROR");
        }
    }).done(function() { 
        console.log('Done');

    }).fail(function() {       
        alert("fail!");
    });


}