Code Igniter Image Uploader / File Uploader – Multiple Files

Code Igniter Image Uploader

Creating an image uploader or file uploader is a big problem in web domain coding. Code Igniter Made it easy for you. It uses two classes File Uploading Class and Image Manipulation Class. Great Programme made for save the life of a web developer. I Got a detailed post from Jefim Boressov (The Mighty Web Developer)’s Blog. And It was Great. I am copying the code for my future reference. Thanks Jefim.

Image / file upload with CodeIgniter

Image upload is difficult for web developer. And even though CI has a lot to offer (in the means of documentation) it still lacks a direct copy-paste code on their website so that people can just put it into their controller and use away.
Here we will have:

• Image upload form with 5 images
• And a controller function that will upload those
• Thumbnails will be there too

Ok, lets start with the HTML form code, it is very basic:
views/upload_form.php

<form method="post" action="uploader/go" enctype="multipart/form-data">
  <input type="file" name="image1" /><br />
  <input type="file" name="image2" /><br />
  <input type="file" name="image3" /><br />
  <input type="file" name="image4" /><br />
  <input type="file" name="image5" /><br />
  <input type="submit" name="go" value="Upload!!!" />
</form>

And now the controller:
controllers/Uploader.php

class Uploader extends Controller {
  function go() {
    if(isset($_POST['go'])) {
      /* Create the config for upload library */
      /* (pretty self-explanatory) */
      $config['upload_path'] = './assets/upload/'; /* NB! create this dir! */
      $config['allowed_types'] = 'gif|jpg|png|bmp|jpeg';
      $config['max_size']  = '0';
      $config['max_width']  = '0';
      $config['max_height']  = '0';
      /* Load the upload library */
      $this->load->library('upload', $config);

      /* Create the config for image library */
      /* (pretty self-explanatory) */
      $configThumb = array();
      $configThumb['image_library'] = 'gd2';
      $configThumb['source_image'] = '';
      $configThumb['create_thumb'] = TRUE;
      $configThumb['maintain_ratio'] = TRUE;
      /* Set the height and width or thumbs */
      /* Do not worry - CI is pretty smart in resizing */
      /* It will create the largest thumb that can fit in those dimensions */
      /* Thumbs will be saved in same upload dir but with a _thumb suffix */
      /* e.g. 'image.jpg' thumb would be called 'image_thumb.jpg' */
      $configThumb['width'] = 140;
      $configThumb['height'] = 210;
      /* Load the image library */
      $this->load->library('image_lib');

      /* We have 5 files to upload
       * If you want more - change the 6 below as needed
       */
      for($i = 1; $i < 6; $i++) {
        /* Handle the file upload */
        $upload = $this->upload->do_upload('image'.$i);
        /* File failed to upload - continue */
        if($upload === FALSE) continue;
        /* Get the data about the file */
        $data = $this->upload->data();

        $uploadedFiles[$i] = $data;
        /* If the file is an image - create a thumbnail */
        if($data['is_image'] == 1) {
          $configThumb['source_image'] = $data['full_path'];
          $this->image_lib->initialize($configThumb);
          $this->image_lib->resize();
        }
      }
    }
    /* And display the form again */
    $this->load->view('upload_form');
  }
}

Also You can use the HTML 5 Image uploader for uploading multiple files without flash. The New HTML5 Drag and Drop feature also work with codeigniter . Check the detailes about Jquery HTML5 File Uploader for Codeigniter . Also You can download the source file from GitHub  blueimp / jQuery-File-Upload .

And that is it. Customize it to your needs, the basics are there already. And good luck!

Related articles

• Jquery Plugin for HTML5 File Upload (smashingweb.ge6.org)
• Image Upload and Text Inputs in Same CodeIgniter Form (stackoverflow.com)
• Upload files from http to iphone (stackoverflow.com)
• Check whether file is uploaded (stackoverflow.com)
• Blueimp JQuery file upload with MVC 3 (stackoverflow.com)
• Codeigniter Tips and Tricks (itzurkarthi.com)

• Share on Twitter
• Share on Facebook
• Share on LinkedIn
• Share on Digg
• Share on StumbleUpon
• Share on Google+