Image uploading with ajax!

I am not sure what i am doing wrong with my code from controller! here is the code to upload image via ajax submission:

PHP Code:

public function post()
    {
        $formrules = array(
            array(
                'field' => 'title',
                'label' => 'News Link',
                'rules' => 'required|max_length[200]'
            ),
            array(
                'field' => 'news',
                'label' => 'News Snippet',
                'rules' => 'required|max_length[2500]'
            )
        );

        $this->form_validation->set_rules($formrules);

        if ($this->form_validation->run() == TRUE)
        {
            # Started working with file upload.
            $validFiles = array(
                'upload_path'   => 'tmp_data/',
                'allowed_types' => 'jpg|png|gif',
                'max_size'      => 250
            );
            $this->load->library('upload', $validFiles);
            if ($this->upload->do_upload('newsphoto'))
            {
                echo "Image Uploaded Successfully!";
                # Add data to db.
                $this->load->model('links');
                $data = array(
                    'title' => $this->input->post('title'),
                    'news'  => $this->input->post('news')
                );
                $this->links->add($data);
            }
            else
            {
                echo $this->upload->display_errors();
            }
            # End all the process of file upload.
        }
        else
        {
            echo validation_errors();
        }
    } 


it is a method of a controller, but every time i started to upload something it seems to be an error, a msg shows like this:

You did not select a file to upload.

any idea on what i am missing?
Thanks CI Community

Post here your client side code as well, your code will support only multipart/form-data if your are using supported plugin .

Server side code depend on you client send method, many AJAX file uploads plugins send file as content type 'application/octet-stream'

Passionate PHP Programmer & Codeigniter Developer :- Always happy to help you!

Thanks for your response.
Here is my views code.

PHP Code:

<div class="CustomForm">
    <?php echo form_open_multipart('adminal/post', array('class' => 'newsForm')); ?>
    <div class="row">
        <input type="file" class="InputField" name="newsphoto" value="">
        <input type="text" class="InputField" name="title" value="">
        <textarea name="news" class="InputField" cols="30" rows="10"></textarea>
    </div>
    <?php form_close(); ?>
</div> 


You have not used AJAX code, that can send data on server by AJAX... i would prefer to use jQuery Form Plugin to use server side as same as form post, amendment in view code according jQuery plugin

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>

<script>
     // wait for the DOM to be loaded
     $(document).ready(function() {
         // bind 'myForm' and provide a simple callback function
         $('.newsForm').ajaxForm(function() {
             //success callback code here
         });
     });
</script>
<div class="CustomForm">
    <?php echo form_open_multipart('adminal/post', array('class' => 'newsForm')); ?>
    <div class="row">
        <input type="file" class="InputField" name="newsphoto" value="">
        <input type="text" class="InputField" name="title" value="">
        <textarea name="news" class="InputField" cols="30" rows="10"></textarea>
    </div>
    <?php form_close(); ?>
</div>

hope, the code would be useful you, please let me know if you have any issue

Passionate PHP Programmer & Codeigniter Developer :- Always happy to help you!

I am sorry! i forgot to add my js code above, here is my javascript code, pls have a look

Code:

<script>
    $(document).on('ready', function(){
        var form = $('form.newsForm');
        form.on('submit', function(c){
            c.preventDefault();
            $.post('/adminal/post', $('form.newsForm').serialize(), function(c){
                var msg = $('div.jsMessage');
                msg.empty();
                msg.html(c);
            });
        });
    });
</script>

what i am missing here!

I am sorry! i forgot to add my js code above, here is my javascript code, pls have a look

Code:

<script>
   $(document).on('ready', function(){
       var form = $('form.newsForm');
       form.on('submit', function(c){
           c.preventDefault();
           $.post('/adminal/post', $('form.newsForm').serialize(), function(c){
               var msg = $('div.jsMessage');
               msg.empty();
               msg.html(c);
           });
       });
   });
</script>

what i am missing here!

$.post() jQuery method does not support to send fileData with AJAX request, you should use $.ajax() more reliable method instead of $.post()

it’s easiest to use the FormData class:

So now you have a FormData object, ready to be sent along with the XMLHttpRequest. and append fields with FormData Object

Code:

<script type="text/javascript">
           $(document).ready(function () {
               var form = $('form.newsForm');
               form.on('submit', function (c) {
                   c.preventDefault();

                   var data = new FormData();
                   $.each($('form.newsForm :input'), function(i, fileds){
                       data.append($(fileds).attr('name'), $(fileds).val());
                   });
                   $.each($('form.newsForm input[type=file]')[0].files, function (i, file) {
                       data.append(file.name, file);
                   });
                   $.ajax({
                       url: '/adminal/post',
                       data: data,
                       cache: false,
                       contentType: false,
                       processData: false,
                       type: 'POST',
                       success: function (c) {
                           var msg = $('div.jsMessage');
                           msg.empty();
                           msg.html(c);
                       }
                   });
                   return false;
               });
           })
</script>

and forcing jQuery not to add a Content-Type header for you, otherwise, the upload file boundary string will be missing from it.

Passionate PHP Programmer & Codeigniter Developer :- Always happy to help you!

Many thanks @techbat for your time :=)