CodeIgniter Forums

Full Version: Image uploading with ajax!
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
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:
Quote:You did not select a file to upload.
any idea on what i am missing?
Thanks CI Community Smile
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'
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
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!
(03-23-2015, 04:40 AM)rakibtg Wrote: [ -> ]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.
Many thanks @techbat for your time :=)