How to upload Multiple Files and Images in CodeIgniter

CodeIgniter has upload library which makes easier to handle file uploading.

Sometimes need to allow multiple files upload to the web application. This can easily add by separately creating file element for selection.

But this can handle with single file element by adding multiple attribute.

Need to loop on selected files for upload.

In this tutorial, I show how you can upload multiple files in CodeIgniter.

How to upload Multiple Files and Images in CodeIgniter


Contents

  1. Create directory
  2. Controller
  3. View
  4. Conclusion

1. Create directory

Create a uploads directory at the project root to store files.

How to upload Multiple Files and Images in CodeIgniter


2. Controller

Create a User.php file in application/controllers directory.

  • _construct() – Load url helper.
  • index() – On form submit count total files and loop on it. Define a new $_FILES['file'] array. Set upload preference and load upload library.

In $this->upload->do_upload('file') pass the created $_FILES['file'] keyname "file".

Initialize $data['filenames'] with $filename on successfully upload.

Completed Code

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class User extends CI_Controller {

  public function __construct() {
    parent::__construct();

    // load base_url
    $this->load->helper('url');
  }

  public function index(){

    // Check form submit or not
    if($this->input->post('upload') != NULL ){
 
      $data = array();

      // Count total files
      $countfiles = count($_FILES['files']['name']);
 
      // Looping all files
      for($i=0;$i<$countfiles;$i++){
 
        if(!empty($_FILES['files']['name'][$i])){
 
          // Define new $_FILES array - $_FILES['file']
          $_FILES['file']['name'] = $_FILES['files']['name'][$i];
          $_FILES['file']['type'] = $_FILES['files']['type'][$i];
          $_FILES['file']['tmp_name'] = $_FILES['files']['tmp_name'][$i];
          $_FILES['file']['error'] = $_FILES['files']['error'][$i];
          $_FILES['file']['size'] = $_FILES['files']['size'][$i];

          // Set preference
          $config['upload_path'] = 'uploads/'; 
          $config['allowed_types'] = 'jpg|jpeg|png|gif';
          $config['max_size'] = '5000'; // max_size in kb
          $config['file_name'] = $_FILES['files']['name'][$i];
 
          //Load upload library
          $this->load->library('upload',$config); 
 
          // File upload
          if($this->upload->do_upload('file')){
            // Get data about the file
            $uploadData = $this->upload->data();
            $filename = $uploadData['file_name'];

            // Initialize array
            $data['filenames'][] = $filename;
          }
        }
 
      }
 
      // load view
      $this->load->view('user_view',$data);
    }else{

      // load view
      $this->load->view('user_view');
    } 
 
  }

}

3. View

Create a user_view.php file in application/views directory.

Create a <form> and to enable multiple file selection add multiple attribute in <input type='file'> and set the name='files[]'.

Completed Code

<!doctype html>
<html>
  <head>
   <title>How to upload Multiple Files and Images in CodeIgniter</title>
  </head>
  <body>
    <!-- Display Message -->
    <b><?php if(isset($filenames)) echo "Successfully uploaded ".count($filenames)." files"; ?></b>
    
    <!-- Form -->
    <form method='post' action='<?php echo base_url(); ?>' enctype='multipart/form-data'>

      <input type='file' name='files[]' multiple > <br/><br/>
      <input type='submit' value='Upload' name='upload' />
    </form>
 
  </body>
</html>

4. Conclusion

You need to add multiple attribute to file element for enabling select more than one file and set its name as array type by putting [].

On <form > submit loop on the files and create a new $_FILES array for uploading.

If you found this tutorial helpful then don't forget to share.

Related Post

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  

2 Comments

  1. Sergio Varela said:

    Hi, one question, why the name of the files are being changed in the uploads folder after uploading?

    November 7, 2018
    Reply
    • Yogesh Singh said:

      Hi Sergio,
      I am not renaming the uploading file name in the example.

      November 8, 2018
      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *