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
– Danial212k, Commented Apr 19, 2020 at 4:18
I really dont know. but my other parameters are being saved in database just file is not being sent to controller — Danial212k
– Danial212k, Commented Apr 19, 2020 at 5:08
Could you show your html form? I think the problem is at the form name — Hasta Dhana
– Hasta Dhana, Commented Apr 19, 2020 at 5:25
<?php echo form_open_multipart('editMatter');?> this is my form opening using php — Danial212k
– Danial212k, Commented Apr 19, 2020 at 5:28

Hasta Dhana · Accepted Answer · 2020-04-19 05:44:58Z

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, 2020 at 5:44

Hasta Dhana

4,7047 gold badges21 silver badges28 bronze badges

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

6 Comments

Danial212k Over a year ago

I tried your solution but file is still not uploading. I cant see that file in my folder

Danial212k Over a year ago

Do I have to change something in controller?

Hasta Dhana Over a year ago

I think you should try to debug it step by step, can you use the browser console?

Hasta Dhana Over a year ago

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?

Danial212k Over a year ago

it says this : jQuery-2.1.4.min.js:4 POST localhost/testApp/controlerName/saveDetailData 500 (Internal Server Error)

|

Collectives™ on Stack Overflow

how to upload file using ajax in codigniter

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related