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.

You need to follow the hidden iFrame approach to submit the file in background. alfajango.com/blog/ajax-file-uploads-with-the-iframe-method — Nish
– Nish, Commented Feb 24, 2014 at 12:39

Ravikumar Sharma · Accepted Answer · 2014-02-24 13:16:16Z

5

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!");
    });


}

edited Feb 24, 2014 at 13:16

answered Feb 24, 2014 at 12:41

Ravikumar Sharma

3,7505 gold badges39 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ranjan Goyal Over a year ago

I tried above solution and I get an error SyntaxError: JSON.parse: unexpected character var data = JSON.parse(XMLHttpRequest.responseText);

Ravikumar Sharma Over a year ago

is file uploaded? remove dataType= json

Ravikumar Sharma Over a year ago

error was because i was using json response from my server side code. so just remove that line from complete call back and remove dataType='json'. i updated answer.

Luis Eduardo Rojas Cabrera Over a year ago

Quite late but this helped me too. Thanks a lot Ravi!

Collectives™ on Stack Overflow

CodeIgniter, Jquery Ajax, Form Submission and File Upload

MY HTML is : Given only relevant section of HTML below

MY JQUERY CODE is

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

MY HTML is : Given only relevant section of HTML below

MY JQUERY CODE is

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related