Upload form with image in codeigniter using ajax

Question

I'm trying to upload a form with a file field in CodeIgniter. I successfully insert the form data without file to database. But it shows the error below when I try with the file field

`<p>You did not select a file to upload.</p>`

I tried many ways like this forum thread and this SO question, but nothing helps me.

view_add_author.php

<?php
$this->load->helper('form');
echo form_open_multipart('admin/form_actions/add_author', 'id="add_author_form"');
?>
<div class="form-group">
    <label for="author_image">Image</label>
    <input type="file" name="author_image" id="author_image">
    <p class="help-block">Format(jpg, jpeg, gif, png)</p>
</div>

custom.js

function add_author(data){
    return $.ajax({
        url: url+'admin/form_actions/add_author',
        type: 'POST',
        async: false,
        dataType: 'json',
        mimeType:"multipart/form-data",
        data: data
    });
}


$('#add_author_form').submit(function(e){
    e.preventDefault();
    var data = $('#add_author_form').serialize();
    add_author(data).done(function(data){
        if(data.msg != '')
        {
            $('#add_author_form')[0].reset();
            alert(data.msg);
        }
        else if(data.error != '')
        {
            alert(data.error);
        }
    });
});

form_actions.php

public function add_author ()
{
    $this -> load -> helper ( 'form' );
    $config = array (
        'upload_path' => './images/author/',
        'allowed_types' => 'gif|jpg|jpeg|png',
        'max_size' => '2000',
        'max_width' => '2000',
        'max_height' => '2000',
        'encrypt_name' => true,
    );

    $this -> load -> library ( 'upload', $config );

    if ( ! $this -> upload -> do_upload ( 'author_image' ) )
    {
        echo $error = $this -> upload -> display_errors ();
    }
    else
    {
        echo $data = $this -> upload -> data ();
    }
}

score 0 · Answer 1 · edited May 23 '17 at 10:29

0

I think you have to use the FormData() class on newer browsers to get it working. See this answer https://stackoverflow.com/a/5976031/860752

Or use a third party plugin similar to this http://blueimp.github.io/jQuery-File-Upload/index.html

edited May 23 '17 at 10:29

Community

1
1

answered Oct 18 '14 at 14:31

dakdad

2,947
2
22
21

score 0 · Answer 2 · answered Oct 18 '14 at 16:24

you can use below code

 $(document).ready(function() { 
        // bind 'myForm' and provide a simple callback function 
        $('#add_author_form).ajaxForm(function() { 
            alert("Thank you for your comment!"); 
        }); 
    });

I hope you find it helpful

score 0 · Accepted Answer · answered Dec 20 '14 at 12:31

I did the below function for upload image in codeigniter using the upload library

By using this function, i can add single/multiple file

function add_image ( $path, $field ) //upload and the file field name
{
    $config = array (
        'upload_path' => $path,
        'allowed_types' => 'gif|jpg|jpeg|png',
        'max_size' => '1024',
        'max_width' => '1024',
        'max_height' => '1024',
        'encrypt_name' => TRUE
    );
    $this->load->library ( 'upload', $config ); //load codeigniter libraries
    $name_array = array ();
    $count = count ( $_FILES[ $field ][ 'size' ] );
    if ( count ( $_FILES[ $field ] ) == count ( $_FILES[ $field ], COUNT_RECURSIVE ) ) //if only one image is present
    {
        if ( !$this->upload->do_upload ( $field ) )
        {
            return FALSE;
        }
        $data = $this->upload->data ();
        return $data[ 'file_name' ]; //return the uploaded file name
    }
    else //if multiple images selected
    {
        foreach ( $_FILES as $key => $value )
        {
            for ( $s = 0; $s < $count; $s++ )
            {
                $_FILES[ 'userfile' ][ 'name' ] = $value[ 'name' ][ $s ];
                $_FILES[ 'userfile' ][ 'type' ] = $value[ 'type' ][ $s ];
                $_FILES[ 'userfile' ][ 'tmp_name' ] = $value[ 'tmp_name' ][ $s ];
                $_FILES[ 'userfile' ][ 'error' ] = $value[ 'error' ][ $s ];
                $_FILES[ 'userfile' ][ 'size' ] = $value[ 'size' ][ $s ];
                if ( $this->upload->do_upload () )
                {
                    $data = $this->upload->data ();
                    $name_array[ ] = $data[ 'file_name' ];
                }
                else
                {
                    return FALSE;
                }
            }
            return $name_array;//return the names of images uploaded
        }
    }
}

Upload form with image in codeigniter using ajax

3 Answers3