Upload Multiple Images & Files in CodeIgniter Example

Hi! In this post, we'll see how to upload multiple images and files in codeigniter. Kodingmadesimple has a nice tutorial about codeigniter file upload process. Normal file uploading has a limitation which is you can only upload a single file/image at a time. What if you want to upload multiple files or images in codeigniter in one go? Is it possible to do that? The answer is YES! You can! Here I'll show you an example about multiple file upload in codeigniter.

CodeIgniter Upload Multiple Files/Images:

For this file uploading process you'll need a folder in the server to store all your uploaded files. Just create a folder named 'uploads' inside the application root and make sure to enable 'write' access to it.

Next you need to create user interface to upload files. So create a code igniter view with a form and add file control & submit button to it. Set the name of the file field as array and add 'multiple' attribute to enable multi-select. Without this setting, you'll only be able to select single file at a time to upload.

Also set form type to 'multipart' for the uploading process to work. Here is the view I have created for the demo.

View (multiple_upload_view.php):

<div class="container">
    <div class="row">
        <div class="col-xs-8 col-xs-offset-2 well">
            <?php echo form_open_multipart('multiple_upload/upload');?>
                <legend>Select Files to Upload:</legend>
                <div class="form-group">
                    <input name="usr_files[]" type="file" multiple="" />
                    <span class="text-danger"><?php if (isset($error)) { echo $error; } ?></span>
                </div>
                <div class="form-group">
                    <input type="submit" value="Upload" class="btn btn-primary btn-block"/>
                </div>
            <?php echo form_close(); ?>
            <?php if (isset($success_msg)) { echo $success_msg; } ?>
        </div>
    </div>
</div>

This view would create a html form similar to this,

upload-multiple-images-files-codeigniter-example

Next you need to create a controller where you receive the files from the file control and loop through the $_FILES array one by one and upload them to server using $this->upload->do_upload() function. By default this function read & uploads the file from the form field with name 'userfile'. If you want to use some other name then you should pass it as function parameter to do_upload().

Controller (multiple_upload.php):

<?php
class multiple_upload extends CI_Controller {

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

    function index()
    {
        //load file upload form
        $this->load->view('multiple_upload_view');
    }

    function upload()
    {
        // set upload preferences
        $config['upload_path'] = './uploads/';
        $config['allowed_types'] = 'txt|pdf';
        $config['max_size']    = '150';

        //initialize upload class
        $this->load->library('upload', $config);
        
        $upload_error = array();
        
        for($i=0; $i<count($_FILES['usr_files']['name']); $i++)
        {
            $_FILES['userfile']['name']= $_FILES['usr_files']['name'][$i];
            $_FILES['userfile']['type']= $_FILES['usr_files']['type'][$i];
            $_FILES['userfile']['tmp_name']= $_FILES['usr_files']['tmp_name'][$i];
            $_FILES['userfile']['error']= $_FILES['usr_files']['error'][$i];
            $_FILES['userfile']['size']= $_FILES['usr_files']['size'][$i];
            
            if (!$this->upload->do_upload())
            {
                // fail
                $upload_error = array('error' => $this->upload->display_errors());
                $this->load->view('multiple_upload_view', $upload_error);
                break;
            }
        }
        
        // success
        if ($upload_error == NULL)
        {
            $data['success_msg'] = '<div class="alert alert-success text-center">Finished uploading...</div>';
            $this->load->view('multiple_upload_view', $data);
        }
    }
}
?>

In the above controller I have added a function upload() to loop through the file array, upload files one by one and display a success message once the process is complete.

codeigniter-upload-multiple-files-success

If anything goes wrong at the time of uploading, then error message will be shown to the user.

codeigniter-multiple-image-upload-error

If you want to restrict uploading to images alone, then set the configuration to accept only image file types like this,

$config['allowed_types'] = 'png|gif|jpg|jpeg';

To accept all sorts of file types use '*' instead (default),

$config['allowed_types'] = '*';
Read Also:

That explains about uploading multiple images and files in php codeigniter. I have given the logic. Just customize it to suit your needs. Meet you another interesting tutorial :)

4 comments:

  1. Hi kodingmadesimple. I really like your content and I use some of your code in my project. I really appreciate what you do!
    But right now I have a problem. I have a project that we can upload multiple image. Later on, we can edit it, re-order it, and make an image to be default. I currently using Fineuploader for my codeigniter, but it doesn't support edit or delete image after upload. Hope you can help me. Thank you in advance!
    (I currently try to combine ImageCRUD and Fineuploader to do my project, but I hope you can gave me your thought about that).

    ReplyDelete
  2. I have a product display page where it should show all the images of that perticular product. How to implement this? NOTE: there will be different pages for different products and the code should display only the images of that product not other products.. How to deal with it using database and codeigniter?

    ReplyDelete
  3. i want to select multiple image. not at the same time. one by one want to select 10 image. how we can upload 10 image if we have to select images one by one.

    ReplyDelete
  4. hello, i think you have done a great job! it saved my time wasting more than 5 days on finding best solution for my multi file web creation Codeigniter cms application. good job!

    ReplyDelete