how to upload file using ajax in codigniter

Question

I have gone through many answers

How to upload file using ajax in codeigniter File upload in codeigniter using ajax

which does not work with my code.

I want to upload word pdf img any sort of file using ajax.

This is my code:

Controller:

public function saveDetailData()
{

    $rowId = $this->input->post('rowId',true);
    $rowData = $this->input->post('rowData',true);
    $rowColumn = $this->input->post('rowColumn',true);
    $detailTableName = $this->input->post('detailTableName',true);

    if($rowColumn == 'attachment'){
        $filename2 = 'Query_'.rand(0,999999);
        if( ! is_dir('uploads') ){mkdir('uploads',0777,TRUE); };      
        $path='uploads/queries/';        
        $imgtmpname=$_FILES['rowData']['tmp_name'];
        $name = $_FILES["rowData"]["name"];
        $ext = end((explode(".", $name)));
        $fullpath= $path .$filename2.'.'.$ext;
        $filename = $filename2;
        move_uploaded_file($imgtmpname,$fullpath);
        if ($ext <> '')
       {
        $fields = array(
                'attachment' => $fullpath
              );
       }
       else
       {
        $fields = array(
                'attachment' => ''
              );
       }
    }

    $this->user_model->saveDetailData($rowId,$fields, $detailTableName);

    echo "Successfully Saved";    
}

View:

<?php echo form_open_multipart('editMatter');?>
<input onfocusout="saveDetailData1('<?php echo $detail->id; ?>',$(this).attr('name'),'attachment' )" type="file" id="attachment_<?php echo $detail->id; ?>" name="attachment_<?php echo $detail->id; ?>" value="">

<script>
  function saveDetailData1(rowId,rowData,rowColumn) {
   attachment = new FormData( $('#'+rowData)[0] );
   $.ajax({
    type: "POST",
    url: "<?php echo base_url('user/saveDetailData')?>",
    data: {  '<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>',
                                                'rowId': rowId,
                                                'rowData' :attachment,
                                                'rowColumn' :rowColumn,
                                                'detailTableName': 'tbl_mattersdetail',
                                              },
                                        dataType:"JSON",
                                        mimeType: "multipart/form-data",
                                        contentType: false,  
                                        cache: false,  
                                        processData:false,  
                                        success: function(response){ 
                                          //alert(response);
                                        }
         });
     }
  </script>

only the saveDetailData1 is not working well which causing $_FILES['rowData']['tmp_name'] have no data in controller to upload — Danial212k, Apr 19 '20 at 04:18
I really dont know. but my other parameters are being saved in database just file is not being sent to controller — Danial212k, Apr 19 '20 at 05:08
Could you show your html form? I think the problem is at the form name — Hasta Dhana, Apr 19 '20 at 05:25
Input id: `id="attachment_id; ?>"`, you've forgot 'attachment' here: `attachment = new FormData( $('#'+rowData)[0] );` and should be 'rowId' instead of 'rowData' — Triby, Apr 19 '20 at 05:33

score 0 · Answer 1 · answered Apr 19 '20 at 05:44

0

Try to modify the saveDetailData1 function like this :

  function saveDetailData1(rowId,rowData,rowColumn) {
   attachment = new FormData();
   attachment.append('rowData', $('input[type=file][name="attachment_'+rowId+'"]')[0].files[0]);

   $.ajax({
    type: "POST",
    url: "<?php echo base_url('user/saveDetailData')?>",
    data: {  '<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>',
                                                'rowId': rowId,
                                                'rowData' :attachment,
                                                'rowColumn' :rowColumn,
                                                'detailTableName': 'tbl_mattersdetail',
                                              },
                                        dataType:"JSON",
                                        mimeType: "multipart/form-data",
                                        contentType: false,  
                                        cache: false,  
                                        processData:false,  
                                        success: function(response){ 
                                          //alert(response);
                                        }
         });
     }

This will skip the rowData function parameter, but instead directly select the file input as the rowData ajax parameter.

answered Apr 19 '20 at 05:44

Hasta Dhana

4,699
7
17
26

I tried your solution but file is still not uploading. I cant see that file in my folder – Danial212k Apr 19 '20 at 06:08
Do I have to change something in controller? – Danial212k Apr 19 '20 at 06:10
I think you should try to debug it step by step, can you use the browser console? – Hasta Dhana Apr 19 '20 at 06:16
Try to right-click the page and select inspect, then go to console tab, and try to reupload the file while the dev tools still opened, do you get error message? – Hasta Dhana Apr 19 '20 at 06:19
it says this : jQuery-2.1.4.min.js:4 POST http://localhost/testApp/controlerName/saveDetailData 500 (Internal Server Error) – Danial212k Apr 19 '20 at 06:22
i have showed my backend controller code as well as front end view code. if i skip file upload everything works fine. I just want my file upload as I browse it and focus is lost and its path get save in database and file moved to its relevant defined folder – Danial212k Apr 22 '20 at 08:21

how to upload file using ajax in codigniter

1 Answers1