"You did not select a file to upload. " get this error while uploading image using ajax

Question

I am working with CodeIgniter and jQuery ajax. I want to upload image using ajax. But it shows an error like You did not select a file to upload.

Here,I have write jQuery :

jQuery(document).on('submit', '#signup_form', function()
  {
   //debugger;
   var data = jQuery(this).serialize();
   jQuery.ajax({
    type : 'POST',
    url  : '<?php echo base_url()."front/ajax_register"; ?>',
    data : data,
    success :  function(data)
    {
     jQuery(".result").html(data);
    }
   });
   return false;
  });

<form id="signup_form" method="post" enctype="multipart/form-data">
   <div class="row">
        <div class="col-md-3">Upload Photo</div>
        <div class="col-md-4">
            <input type="file" name="pic" accept="image/*">
        </div>
   </div>
   <div class="row">
        <button type="submit" class="btn btn-default">Submit</button>       
   </div>
</form>

And My function looks like this :

function ajax_register()
{
    if($this->input->post())
    {
        $this->form_validation->set_rules('pass', 'Password', 'required|matches[cpass]');
        $this->form_validation->set_rules('cpass', 'Password Confirmation', 'required');

        if($this->form_validation->run() == true)
        {
            $img = "";
            $config['upload_path'] = './uploads/user/';
            $config['allowed_types'] = 'gif|jpg|png|jpeg';
            $this->upload->initialize($config);

            if ( ! $this->upload->do_upload('pic'))
            {   
                $data['error'] = array('error' => $this->upload->display_errors());
                print_r($data['error']);exit;
                $data['flash_message'] = "Record is not inserted";
            }
            else
            {
                $upload = $this->upload->data();
                //print_r($upload);exit;
                $data = array(
                        'ip_address'            =>$this->input->ip_address(),
                        'first_name'            =>$this->input->post('firstname'),
                        'last_name'             =>$this->input->post('lastname'),
                        'phone'                 =>$this->input->post('phone'),
                        'email'                 =>$this->input->post('email'),
                        'group_id'              =>$this->input->post('role'),
                        'password'              =>$this->input->post('password'),
                        'image'                 =>$upload['file_name'],
                        'date_of_registration'  =>date('Y-m-d')
                    );
                print_r($data);exit;
                $user_id = $this->admin_model->insert_user($data);

                $user_group = array(
                        'user_id'   => $user_id,
                        'group_id'  => $this->input->post('role')
                    );

                $this->admin_model->insert_group_user($user_group);
                echo "<p style='color:red;'>You are successfully registerd.</p>";                
            }
        }
        else
        {
            echo "<p style='color:red;'>".validation_errors()."</p>";
        }
    }
}

So how to resolve this issue?What should I have to change in my code?

The problem is properly in this line: `var data = jQuery(this).serialize();`, if you serialize the data, the file selected properly will be lost and do not submit with the request — Drkdra, Aug 17 '16 at 05:41
What is expected result of `'image' =>$upload['file_name']`? — guest271314, Aug 17 '16 at 05:42
@guest271314 It will give image name so i can store it into database. — Nisarg Bhavsar, Aug 17 '16 at 05:44
@Drkdra so what shoul i have to write instead of `var data = jQuery(this).seriali‌ze();` — Nisarg Bhavsar, Aug 17 '16 at 05:44
Use FormData instead, like [this](http://stackoverflow.com/questions/6974684/how-to-send-formdata-objects-with-ajax-requests-in-jquery) — Drkdra, Aug 17 '16 at 05:46
@Drkdra I have tried FormData. But it reload the page and code is not execute. — Nisarg Bhavsar, Aug 17 '16 at 05:51
@Nisarg What does `'file_name'` reference at `$upload['file_name‌']`? — guest271314, Aug 17 '16 at 05:51
replace this `jQuery(this).serialize();` with `jQuery('#signup_form').serialize();` you need to serialize only form data instead of whole document data. — Raj Jagani, Aug 17 '16 at 05:52
please check in your console what data you are posting. please double check with your input file name and check the response what you are getting. — Raj Jagani, Aug 17 '16 at 06:02

score 2 · Accepted Answer · answered Aug 17 '16 at 06:00

As I said, the problem is probably in the data you send to backend. If you want to submit AJAX with input file, use FormData.

Try this:

jQuery(document).on('submit', '#signup_form', function()
{
    //debugger;
    var data = new FormData($('#signup_form')[0]);

    jQuery.ajax({
        type : 'POST',
        url  : '<?php echo base_url()."front/ajax_register"; ?>',
        data : data,
        processData: false,
        contentType: false,
        success :  function(data)
        {
            jQuery(".result").html(data);
        }
    });
    return false;
});

score 0 · Answer 2 · answered Aug 17 '16 at 05:47

Try this:

$('#upload').on('click', function() {
        var file_data = $('#pic').prop('files')[0];
        var form_data = new FormData();
        form_data.append('file', file_data);

        $.ajax({
                url         : 'upload.php',     // point to server-side PHP script 
                dataType    : 'text',           // what to expect back from the PHP script, if anything
                cache       : false,
                contentType : false,
                processData : false,
                data        : form_data,                         
                type        : 'post',
                success     : function(output){
                    alert(output);              // display response from the PHP script, if any
                }
         });
         $('#pic').val('');                     /* Clear the file container */
    });

Php :

<?php
    if ( $_FILES['file']['error'] > 0 ){
        echo 'Error: ' . $_FILES['file']['error'] . '<br>';
    }
    else {
        if(move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']))
        {
            echo "File Uploaded Successfully";
        }
    }

?>

This will upload the file.

P.S.: Change the code as per CI method.

score 0 · Answer 3 · answered Aug 17 '16 at 05:48

0

var data = jQuery(this).serialize();

this refers to document

answered Aug 17 '16 at 05:48

lx1412

1,160
6
14

"You did not select a file to upload. " get this error while uploading image using ajax

3 Answers3