Upload Multiple Images & Files in CodeIgniter (EXAMPLE)

On 9/15/2016

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: CodeIgniter Login and Registration System

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 :)

1 comment:

  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

Contact Form

Name

Email *

Message *