AJAX Multi File upload in CodeIgniter

Uploading files asynchronously can be a pain at the best of times, but when coupled with CodeIgniter, it can be a particularly frustrating experience. Gladly, there is now a very easy way to upload multiple files using jQuery Form Plugin.

I assume you have a working knowledge of CodeIgniter and jQuery, and that you already have installed and set-up CodeIgniter.

Download the Multi File Upload Extension

Download Extension for Codeiginiter version 3.0 and above:

or download support for version 2.2 and bellow

Installation: Simply copy the MY_Upload.php file to application/libraries directory.

Creating the Upload Form

Using a text editor, create a form called upload_form.php. In it, place this code and save it to your applications/views/upload folder:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<html>
<head>
<script type = "text/javascript" src = "//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script type = "text/javascript" src = "//cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.js"></script>
<title>Upload Form</title>
</head>
<body>
    <!-- AJAX Response will be outputted on this DIV container -->
    <div class = "upload-image-messages"></div>

    <div class = "col-md-6">
        <!-- Generate the form using form helper function: form_open_multipart(); -->
        <?php echo form_open_multipart('upload/do_upload', array('class' => 'upload-image-form'));?>
            <input type="file" multiple = "multiple" accept = "image/*" class = "form-control" name="uploadfile[]" size="20" /><br />
            <input type="submit" name = "submit" value="Upload" class = "btn btn-primary" />
        </form>

        <script>                   
        jQuery(document).ready(function($) {

            var options = {
                beforeSend: function(){
                    // Replace this with your loading gif image
                    $(".upload-image-messages").html('<p><img src = "<?php echo base_url() ?>images/loading.gif" class = "loader" /></p>');
                },
                complete: function(response){
                    // Output AJAX response to the div container
                    $(".upload-image-messages").html(response.responseText);
                    $('html, body').animate({scrollTop: $(".upload-image-messages").offset().top-100}, 150);
                   
                }
            }; 
            // Submit the form
            $(".upload-image-form").ajaxForm(options); 

            return false;
           
        });
        </script>
    </div>
</body>
</html>

You’ll notice we are using a form helper to create the opening form tag. File uploads require a multipart form, so the helper creates the proper syntax for you.

The Controller

Using a text editor, create a controller called upload.php. In it, place this code and save it to your applications/controllers/ folder:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<?php

class Upload extends CI_Controller {

    public function __construct() {
   
        parent::__construct();
        // Load the helpers
        $this->load->helper(array('form', 'url'));
    }

    public function index() {
       
        // Load the form
        $this->load->view('templates/header');
        $this->load->view('upload/upload_form', array('error' => ' ' ));
        $this->load->view('templates/footer');
       
    }
   
    /**
     * Multiple upload functionality will fallback to CodeIgniters default do_upload()
     * method so configuration is backwards compatible between do_upload() and the new do_multi_upload()
     * method provided by Multi File Upload extension.
     *
     */

    public function do_upload(){
   
        // Detect form submission.
        if($this->input->post('submit')){
       
            $path = './uploads/';
            $this->load->library('upload');
           
            /**
             * Refer to https://ellislab.com/codeigniter/user-guide/libraries/file_uploading.html
             * for full argument documentation.
             *
             */

             
            // Define file rules
            $this->upload->initialize(array(
                "upload_path"       =>  $path,
                "allowed_types"     =>  "gif|jpg|png",
                "max_size"          =>  '100',
                "max_width"         =>  '1024',
                "max_height"        =>  '768'
            ));
           
            if($this->upload->do_multi_upload("uploadfile")){
               
                $data['upload_data'] = $this->upload->get_multi_upload_data();
               
                echo '<p class = "bg-success">' . count($data['upload_data']) . 'File(s) successfully uploaded.</p>';
               
            } else {   
                // Output the errors
                $errors = array('error' => $this->upload->display_errors('<p class = "bg-danger">', '</p>'));              
           
                foreach($errors as $k => $error){
                    echo $error;
                }
               
            }
           
        } else {
            echo '<p class = "bg-danger">An error occured, please try again later.</p>';
           
        }
        // Exit to avoid further execution
        exit();
    }
}

Configure Routes

Go to application/config/routes.php and add the following lines:

1
2
3
$route['upload/do_upload'] = 'upload/do_upload';
$route['upload/(:any)'] = 'upload/view/$1';
$route['upload'] = 'upload';

The Upload Folder

You’ll need a destination folder for your uploaded images. Create a folder at the root of your CodeIgniter installation called uploads and set its file permissions to 777.

Go ahead and try it!

To try your form, visit your site using a URL similar to this one:

1
example.com/index.php/upload/