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>

<div class = "upload-image-messages"></div>

<div class = "col-md-6">

<?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/

Do you need help with a project? or have a new project in mind that you need help with?

Contact Me