Ajax File Upload in Codeigniter

Question

there is multiple file upload widgets on my view page, but for reference i have only added 1st here, what i want to do is, i want to select the file using the button and then by ajax method i want to upload the file to directory and get the file name back into input with name "passport_copy_upload" field.

like this

all other file upload widget on this page will work and at the end we will submit the form and take user to thank you page.

Problem is : File Not getting uploaded to directory , in Network Console getting error : {"error":"You did not select a file to upload."}

My view part

        <form id="fimilyVisaForm" action="https://www.mydomainurl.com/visa/add-other-details/<?php echo $appid;?>" method="post" enctype="multipart/form-data" onsubmit="return(validate());">

                                <h4 class="row marginBottom">Upload Documents</h4>

                <div class="form-control">
                    <div class="col-sm-4 label">Colored Scanned copy of the Passport</div>
                    <div class="col-sm-3">
                       <input type="text" class="form-control-input" placeholder="Colored Scanned copy of the Passport" name="passport_copy_upload" id="passport_copy_upload" onclick="removeError(this.id);" value="">
                    </div>   
                    <div class="col-sm-3">   
                       <input type="button" class="submit-btn read-more" value="Attach" id="passport">
                       <input type="file" name="passportimg" id="passportimg" style="display:none">
                       <a id="viewct" class="submit-btn read-more" href="#">View</a>
                      <div class="labelInfo">Colored Scanned copy of the Passport</div>
                    </div>
                </div>
    </form>

<script>
  document.getElementById('passport').onclick = function() {
    document.getElementById('passportimg').click();
};
</script>

Javascript Ajax Code

<script>
$("#passportimg").change(function() {
    var file_data = $("#passportimg").prop("files")[0];
    var form_data = new FormData();
    form_data.append("file", file_data);
    $.ajax({
        url:'<?= base_url();?>index/do_upload',
        dataType: 'json',
        cache: false,
        async: false,
        contentType: false,
        processData: false,
        data: form_data,                         
        type: 'post',
        success:function(data)  
                     {  
                          console.log(data);
                     } 
    });
});
</script>

This is my controller

    public function do_upload() { 
      header('Content-Type: application/json');

      $config['upload_path']   = '<?= base_url();?>uploads/applicant/'; 
      $config['allowed_types'] = 'gif|jpg|png|jpeg'; 
      $config['max_size']      = 2048;
      $this->load->library('upload', $config);
          $this->upload->initialize($config);

      if ( ! $this->upload->do_upload('passportimg')) {
         $error = array('error' => $this->upload->display_errors()); 
         echo json_encode($error);
      }else { 
         $data = $this->upload->data();
         $success = ['success'=>$data['file_name']];
         echo json_encode($success);
      } 
   }

@sorry utkanos - problem is, file is not getting uploaded into directory — Ojibix Creatives, Feb 17 '19 at 18:16
Have you checked the network console to see what the result of the request is? Have you confirmed that the receiving server-side script receives the data you think it does? (e.g. `var_dump($_FILES)`) — Mitya, Feb 17 '19 at 18:17
@Utkanos : i have checked network console and response is blank there. — Ojibix Creatives, Feb 17 '19 at 18:25
you can find your solution in this [stack overflow question](https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload) — Reza Bidar, Feb 17 '19 at 18:49
@Utkanos : i have updated some code in controller and ajax code, now i getting error in search console - "You did not select a file to upload." — Ojibix Creatives, Feb 18 '19 at 03:43
I think you need to try uploading a mini-sized files like for example text file from notepad, not exceeding 8MB — Jan Lois, Feb 18 '19 at 03:49
@Jan Lois : I have tried to upload files of 4kB , 5 KB, but still the same error, i am getting. i think something is error in the code, that i am not able to figure it out. — Ojibix Creatives, Feb 18 '19 at 04:07

score 2 · Accepted Answer · answered Feb 18 '19 at 05:18

2

Kindly replace:

var file_data = $("#passportimg").prop("files")[0];
var form_data = new FormData();
form_data.append("file", file_data);

To:

var form = $("#fimilyVisaForm")[0];
var form_data = new FormData(form);

answered Feb 18 '19 at 05:18

Jan Lois

177
9

i have tried this, and i am getting : {error: "
The upload path does not appear to be valid.
"} error: "
The upload path does not appear to be valid.
" – Ojibix Creatives Feb 18 '19 at 05:25
Sorry for the above comment, i chnaged the directory, and it uploaded the file, now i need one little help, how to get back file name to my view in input box. thanks alot. – Ojibix Creatives Feb 18 '19 at 05:28
from your model: `return $config['passportimg'][]` , then echo from your controller. then it will be good. – Jan Lois Feb 18 '19 at 05:42

Ajax File Upload in Codeigniter

1 Answers1