Jefim Borissov Житие мое

26Oct/0913

Image / file upload with CodeIgniter

Image upload can be a pain in the *ss. 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');
  }
}

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

Comments (13) Trackbacks (2)
  1. Really awesome thank you !

  2. Really awesome thank you !
    You saved my life and my career. Thanks a lot

  3. very good, thank you.

  4. how to display an error message?

  5. in CI2.0 they have a method:
    $this->image_lib->clear();
    You can use that after resize();

  6. really very good, simple and awesome tutorial.
    Thanks a lot
    basically am new in this codeigniter and its very useful for me.
    Apart from this if pssble then please let me know how can I use GET method in codeigniter
    I need to use that.
    Waiting for your +ve reply on this.

    Thanks

  7. Thank you from Spain, Jefim!

  8. Good to see good to look

  9. Really useful tutorial for beginners

  10. its a nice work but i want to know how can i make thumb only to the first image and not for other all .

  11. Thank you from Indonesia, Alex :)


Leave a comment