How to pass extra fields for post with file upload in ajax codeiginter

Question

I am upload a file in php codeigniter project using a ajax. The file is uploading succesfully. But I also want to post some extra values to database with this. I am not sure how to do it. Can anybody please tell me how to pass another data fields while saving a file in php

Here is my js code

$("#btnupdatecover").click(function(event){

    alert(coverPostion);

     if($("#fileuploadcover").val() != ''){
        if (typeof FormData !== 'undefined') {

      var form = $('#formname').get(0); 
    var formData = new FormData(form);  

    $.ajax({
      type: "POST",
      url: "Userpage/updatedp",
      data: formData,
      mimeType:"multipart/form-data",
      dataType: 'json',
      xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            return myXhr;
      },
      cache:false,                    
      contentType: false,
      processData: false,
      success: function(result){


       toastr8.info({
      message:'Profile Picture Updated', 
        title:"New Image Uploaded",
        iconClass: "fa fa-info",
           // imgURI: ["https://unsplash.it/120/120?image=20"]
    });
       clearAll();
      }                       
    });
    // 
     event.preventDefault();

        }  

}
else
{
     toastr8.info({
      message:'Error Occured', 
        title:"Please try again",
        iconClass: "fa fa-info",
   // imgURI: ["https://unsplash.it/120/120?image=20"]
    });
}

});

My PHP Code

public function updatedp()
    {
    $var = $_FILES ['fileUp'];
    $img=$_FILES ['fileUp'];
    $config['upload_path'] = 'webim/dp_images'; 
    $config['overwrite'] = 'TRUE';
    $config["allowed_types"] = 'jpg|jpeg|png|gif';
    $config["max_size"] = '1400';
    $config["max_width"] = '1400';
    $config["max_height"] = '1400';
    $this->load->library('upload', $config);

    if(!$this->upload->do_upload('fileUp')) 
    {               
        $this->data['error'] = $this->upload->display_errors(); 
        echo json_encode(array("result"=>$this->data['error']));
        exit;
    } 
    else 
    { 

            $data=array('active'=>0);
            $this->db->where('userid','1');
            $this->db->update('music_user_dp',$data);

            $uname['uname'] =$this->session->all_userdata('uname');
            $uname['id'] =$this->session->all_userdata('id');
            $post_data = array(
            'id' => '',
            'userid' => $uname['id']['id'], 
            'profilepic'=>$var['name'], 
            'updatedate' => date("Y-m-d H:i:s"),
            'active' => '1'
           );
          $this->Userpage_model->insert_dp_to_db($post_data);
          echo json_encode(array("result"=>"Success"));
          exit;
    }
    }

I just pass extra fields with this to post in database.

Thanks

I think this will help you http://stackoverflow.com/questions/21044798/how-to-use-formdata-for-ajax-file-upload The poster asked how to send files using Ajax but their example shows how to pass additional data. — mic, Jun 21 '16 at 11:23

Yogesh Shakya · Answer 1 · 2016-06-22T06:39:24.173

0

You can achieve this:

Approach 1

Use hidden fields into the form.

Approach 2

$.ajax({
      type: "POST",
      url: "Userpage/updatedp",
      data: {formData: formData, var1: 'value', var2: 'value'},
      dataType: 'json',
      success: function(result){


       toastr8.info({
      message:'Profile Picture Updated', 
        title:"New Image Uploaded",
        iconClass: "fa fa-info",
           // imgURI: ["https://unsplash.it/120/120?image=20"]
    });
       clearAll();
      }                       
    });

Now these value you will get your controller.

edited Jun 22 '16 at 06:39

answered Jun 21 '16 at 11:29

Yogesh Shakya

355
3
15

if you still need any help let me know. – Yogesh Shakya Jun 21 '16 at 11:30
I am not able to fetch the values in controller. its give me null – Azad Chouhan Jun 21 '16 at 12:13
public function updateCover() { var_dump($this->input->post('var1')); exit; } Its give me null – Azad Chouhan Jun 22 '16 at 04:25
Make sure there is no jquery error while sending the ajax request. – Yogesh Shakya Jun 22 '16 at 04:53
Are you sure the url (Userpage/updatedp) passed into ajax request is sending request to updateCover() method. – Yogesh Shakya Jun 22 '16 at 05:31
Yes because the image is saving in database succesfully.. I have checked it – Azad Chouhan Jun 22 '16 at 05:42
after this I got error TypeError: 'append' called on an object that does not implement interface FormData. – Azad Chouhan Jun 22 '16 at 06:19
there was a spelling mistake again copy the code and use it – Yogesh Shakya Jun 22 '16 at 06:39

How to pass extra fields for post with file upload in ajax codeiginter

1 Answers1