Codeigniter Ajax Upload image

Question

I'm currently developping some forms for my school project with CodeIgniter.

The idea is that I have a form with image upload. I'm trying to do it dynamically with Ajax but it seems not working at all. I tried the non-dynamic version with php and It works perfectly, my images are in my folder and I have no problem with it.

I tried like 5 or 6 plug-ins with no results, it is certainly my fault but I don't know where I did a mistakes.

<---Controller--->

if($result = $this->images_model->add_bdd())
{   
    $data['uploaded'] = $result;
    $data['message_upload'] = 'Image uploader avec succès.';                            
    $this->template->set_title('Upload successful');
    $this->template->view('add_places',$data);
}
else
{   
    $this->template->set_title('Upload failed');
    $this->template->view('add_places');
}

<--Model-->

function add_bdd()
{
    $config = array(
                'allowed_types' => 'jpg|jpeg|tiff',
                'upload_path' => $this->gallery_path,
                'max_size' => 2000,
                'remove_spaces' => TRUE,
                'overwrite' => FALSE
            );

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

        $data_img = $this->upload->data();
        $exif = $this->exif_extractor->coords($data_img['full_path']);
        $data = array(
                'titre' => 'titlecontent',
                'url' => base_url('images/'.$data_img['file_name']),
                'url_min' => base_url('images/'.$data_img['raw_name'].'_min'.$data_img['file_ext']),
                'alt' => 'cover_contentName',
                'id_users' => $this->session->userdata('id'),
                'date_upload' => date('Y-m-d H:m'),
                'date_modified' => date('Y-m-d H:m'),
                'lat' => $exif[0],
                'long' => $exif[1],
                );
        $this->db->insert('pictures',$data);
        return $exif;
    }
    else
    {
        return false;
    }
}

<--View-->

<form action="http://localhost:8888/project/images/add" method="post" accept-charset="utf-8" enctype="multipart/form-data">
<input type="file" name="userfile" value="Image de couverture"  />
<button name="upload" type="button" id="upload">Upload</button>
<input type="submit" name="submit" value="Publish Place"  />
</form>

Can anyone give me a jQuery plugin to upload images dynamically and send back to the script my images with the path and others data that I want to return ?

I can't paste like all the code I made for jQuery, but I really need help about it. It's been 2 days that I'm on it!

Thanks for your help.

Answer 1

Thanks for you help, I change my dynamic about the script so now, it works perfectly with what I have to do.

There is the script for my upload system :

<-- VIEW (upload_img)-->

<div id="container">
<div id="filelist"></div>
<a href="http://localhost:8888/myproject/#" id="userfile" name="userfile">[Select files]      </a>    
<a href="http://localhost:8888/myproject/images/index#" id="uploadfiles">[Upload files]</a
</div>

<-- CONTROLLER -->

function index(){
    if($this->_access())
    {
        $this->template->add_include('js/jquery.js')
                       ->add_include('js/browserplus.js')
                       ->add_include('js/plugins/plupload/plupload.full.js')
                       ->add_include('js/imgfunc.js');
        $this->template->view('upload_img');
    }
    else
    {
        redirect(site_url());
    }
}

function upload_image_spot()
{
    if($query = $this->images_model->upload_image_spot())
    {
        echo json_encode($query);
    }
    else
    {
        echo $this->upload->display_errors('', '');
    }
}

<-- MODEL -->

   function upload_image_spot()
{
    $config['upload_path'] = realpath(APPPATH. '../images/spots');
    $config['allowed_types'] = 'jpg|jpeg|tiff|png';
    $config['max_size'] = 3062;
    $config['encrypt_name'] = TRUE;
    $this->load->library('upload', $config);
    if($this->upload->do_upload('file')) 
    // file means the file send to the website for upload, this is the name of field for Plupload script
    {
    $data_img = $this->upload->data();
    $copies = array(
            array('dir' => 'images/spots/large/', 'x' => 1000, 'y' => 600),
            array('dir' => 'images/spots/thumb/', 'x' => 100, 'y' => 60)
    );

    $this->copies($data_img,$copies);

    return 'whatever'; // Not real data, I don't wanna post them here
    }
}

<-- JS-SCRIPTS -->

First of all include :

-jQuery

-browserPlus

-Plupload

(Plupload Script)

Now add this script in an empty file:

var uploader = new plupload.Uploader({
    runtimes : 'gears,html5,flash,silverlight,browserplus',
    browse_button : 'userfile',
    container : 'container',
    max_file_size : '3mb',
    url : 'yourUploadFunctionCI',
    flash_swf_url : 'plugins/plupload/js/plupload.flash.swf',
    silverlight_xap_url : 'plugins/plupload/js/plupload.silverlight.xap',
    filters : [
        {title : "Image files", extensions : "jpg,jpeg,JPG,JPEG,tiff,png"},
    ]
});

uploader.bind('Init', function(up, params) {
});

$('#uploadfiles').click(function(e) {
    uploader.start();
    e.preventDefault();
});

uploader.init();

uploader.bind('FilesAdded', function(up, files) {
    $.each(files, function(i, file) {
        $('#filelist').html("");
        $('#filelist').append(
            '<div id="' + file.id + '">' +
            file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' +
        '</div>');
    });

    up.refresh();
});

uploader.bind('UploadProgress', function(up, file) {
    $('#' + file.id + " b").html(file.percent + "%");
});

uploader.bind('Error', function(up, err, msg,file) {
    $('#filelist').append("<div>Error: " + err.code +
        ", Message: " + err.message +
        (err.file ? ", File: " + err.file.name : "") +
        "</div>"
    );
    console.log(msg,up,err);
    up.refresh();
});

uploader.bind('FileUploaded', function(up, file,response) {
    $('#' + file.id + " b").html("100%");
    var data = jQuery.parseJSON(msg.response);
    console.log(data);
});

Do your own customization and that's it, no need extra script like you can see on website like copy/paste all script from a php file to a controller, just add 'file' inside do_upload and everything's gonna work fine !

Have a nice day guys, hope it's help.

Simon

Answer 2

Without the Javascript code there's little anyone can do for you.

Check out this tutorial on Nettuts+ which goes into depth of the basic idea that you're after so that you better understand, debug and adjust your code.

Also, I barely use jQuery plugins as I find it easier to code one that better suits the needs of my current project so I can't recommend any.

Answer 3

Does the add_bdd() function return false?

I have used CodeIgnitor to do this very thing and I have found that the filters you specify are usually why you do not get the file uploaded. You should add more code to the section where if ($this->upload->do_upload()) is false and print out the debug code using the following:

echo $this->upload->display_errors();

See here for more info: http://codeigniter.com/user_guide/libraries/file_uploading.html

Keep in mind that if you are calling this via AJAX, you will need a means to see the debug result such as printing the echo'ed debug result to an HTML element on your calling page. You could also print the iformation using a tool like Firebug.