CodeIgniter from Scratch: File Uploading and Image Manipulation
videos

CodeIgniter from Scratch: File Uploading and Image Manipulation

on Feb 19th 2010 with 172 comments
This entry is part 9 of 17 in the CodeIgniter From Scratch Session
« PreviousNext »

In lesson nine of our CodeIgniter series, we’ll build a small image gallery that allows you to upload files, and automatically create thumbnails.

Final Example

Catch Up

Day 9: File Uploading and Image Manipulation

Other Viewing Options

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Burak Guzel is a full time PHP Web Developer living in Arizona, originally from Istanbul, Turkey. He has a bachelors degree in Computer Science and Engineering from The Ohio State University. He has over 8 years of experience with PHP and MySQL. You can read more of his articles on his website at PHPandStuff.com and follow him on Twitter here.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
← Older Comments
  • Lew

    After i have chosen file and choose upload a particular image file. It works fine. However, when i refresh the page, the same image will be added to the gallery again. Is there a bug for the source code?

    • http://www.virtualanuncios.com.br Luan Persini

      Actualy the if(isset($_POST['btn']) dosent work. You gotta clean the post variables, so they wont be sent again.

      Just make a redirect after $this->image_lib->resize();

      redirect(‘gallery’);

    • http://www.facebook.com/reginaldo.gutter Reginaldo Gutter

      Like Luan Persini said, you have to redirect the user using redirec(‘gallery’); in order to refresh the page and get rid from the form data processed in the last action.

  • sarmen

    @Lew , thats not a bug , the same thing would happen if you were using core php. you need to add code that checks if the submit button was pressed before allowing an upload such as

    if(isset($_POST['btn'])
    {
    //do upload
    }

    when you refresh the last action is executed but when you have a button that needs to be pressed it wont.

    • http://www.facebook.com/reginaldo.gutter Reginaldo Gutter

      Actually, this won’t work. You have to refresh the page in order to clean the data from the last action.

  • Jhonny

    this error in my code,

    A PHP Error was encountered

    Severity: Notice

    Message: Undefined property: Gallery_model::$upload

    Filename: models/gallery_model.php

    Line Number: 23

    Fatal error: Call to a member function do_upload() on a non-object in C:\xampp\htdocs\Age\application\models\gallery_model.php on line 23

    line 23//$this->upload->do_upload();

    • http://www.facebook.com/reginaldo.gutter Reginaldo Gutter

      Man, did you load the upload library?

  • http://www.beebell.co.uk Ellen

    Great tutorial, thanks!

    I got it working with one difference:

    I have my images folder in a different location, ie I have
    system/
    application/
    public_html/images/

    I used $this->gallery_path = realpath(FCPATH . ‘/images’);
    (Instead of APPPATH)

  • Thilak

    Great post. Thanks.

  • Jeff

    can anyone help, how can i download file from the server using the codeigniter? plz i need help

  • Luis Angel

    Hi Great tutorial, keep going guys.
    I am new to PHP and CodeIgniter and I would ask you, what if I create folders into the images folder, and within these internal folders have different images ,how can i show the pictures of each directory.
    Thank you.

  • de

    when i try it on local server. why its always shown thumbs.db file ??
    which code are shown :

  • Prabhat

    im using this tutorial on codeigniter 2.1.1 and im confuse on model part of parent::model() class its not working so i removed it and work fine and then when upload image it upload in images folder but not in thumbs directory here is my model code

    gallery_path = realpath(APPPATH . ‘../images’);

    }

    function do_upload() {

    $config = array(
    ‘allowed_types’ => ‘jpg|jpeg|gif|png’,
    ‘upload_path’ => $this->gallery_path,
    ‘max_size’ => 10000
    );

    $this->load->library(‘upload’, $config);
    $this->upload->do_upload();
    $image_data = $this->upload->data();

    $config = array(
    ‘source_image’ => $image_data['full_path'],
    ‘new_image’ => $this->gallery_path . ‘/thumbs’,
    ‘maintain_ratio’ => true,
    ‘width’ => 150,
    ‘height’ => 100
    );

    $this->load->library(‘image_lib’, $config);
    $this->image_lib->resize();

    }

    }

    • Prabhat

      here the full code

      class Gallery_model extends CI_Model {

      var $gallery_path;

      function Gallery_model() {

      $this->gallery_path = realpath(APPPATH . ‘../images’);

      }

      function do_upload() {

      $config = array(
      ‘allowed_types’ => ‘jpg|jpeg|gif|png’,
      ‘upload_path’ => $this->gallery_path,
      ‘max_size’ => 10000
      );

      $this->load->library(‘upload’, $config);
      $this->upload->do_upload();
      $image_data = $this->upload->data();

      $config = array(
      ‘source_image’ => $image_data['full_path'],
      ‘new_image’ => $this->gallery_path . ‘/thumbs’,
      ‘maintain_ratio’ => true,
      ‘width’ => 150,
      ‘height’ => 100
      );

      $this->load->library(‘image_lib’, $config);
      $this->image_lib->resize();

      }

      }

  • http://moonweb.hu Gabesz

    Hi!

    You should update this post for the latest CI.

    tnx

  • israr

    Hi !
    i am new to php, learning codeigniter from these tutorials. everything works fine.
    i have a problem. to create a user profile page, i want to show picture of the user that is currently logged in. how would i get specific image, for example, user have uploaded his image, and that image is stored in database. and the name of image is user id.

  • Arif

    Hi…
    I am a newbie in CodeIgniter… I am using the CodeIgniter v 2.1.3 i have done the necessary changes in the given code like adding CI_ before the class name and changes in the constructor…. but my main problem is i can’t upload any picture and it doesn’t give any error…
    PLEASE …. need urgent help

    • israr

      Hello Arif,
      can you post code here?

      • Arif

        Controller:

        load->model(‘Gallery_model’);

        if ($this->input->post(‘upload’)) {
        $this->Gallery_model->do_upload();
        }

        $data['images'] = $this->Gallery_model->get_images();

        $this->load->view(‘gallery’, $data);

        }

        }

        Model:

        gallery_path = realpath(APPPATH . ‘../images’);
        $this->gallery_path_url = base_url().’images/’;

        }

        function do_upload() {

        $config = array(
        ‘allowed_types’ => ‘jpg|jpeg|gif|png’,
        ‘upload_path’ => $this->gallery_path,
        ‘max_size’ => 2000
        );

        $this->load->library(‘upload’, $config);
        $this->upload->do_upload();
        $image_data = $this->upload->data();

        $config = array(
        ‘source_image’ => $image_data['full_path'],
        ‘new_image’ => $this->gallery_path . ‘/thumbs’,
        ‘maintain_ration’ => true,
        ‘width’ => 150,
        ‘height’ => 100
        );

        $this->load->library(‘image_lib’, $config);
        $this->image_lib->resize();

        }

        function get_images() {

        $files = scandir($this->gallery_path);
        $files = array_diff($files, array(‘.’, ‘..’, ‘thumbs’));

        $images = array();

        foreach ($files as $file) {
        $images []= array (
        ‘url’ => $this->gallery_path_url . $file,
        ‘thumb_url’ => $this->gallery_path_url . ‘thumbs/’ . $file
        );
        }

        return $images;
        }

        }

      • Arif

        class Gallery_model extends CI_Model {

        var $gallery_path;
        var $gallery_path_url;

        function __construct()
        {
        parent::__construct();
        $this->gallery_path = realpath(APPPATH . ‘../images’);
        $this->gallery_path_url = base_url().’images/’;

        }

  • Jonathan Pohlner

    So I made it all the way through the tutorial, until I had to display the images back. I can upload them & rename them. But now displaying them back is not so easy as the newb 101 img tag we all started with. at first I thought this might be a conflict in your suggestions to the htaccess file & codeigniter’s login authentication, but now I’m trying to display the upload for member id 20 on the home page before you even login in, and it’s a dead image… please help!!! check http://cutnedge.info/ for reference.

    • Jonathan Pohlner

      ok, ;my web host has isolated the issue. the file extensions are case sensitive. I see we can rename the file, but that does not effect the file extension. I need to change image.jpg to image.JPG to prevent making the users do this manually.

  • http://www.facebook.com/reginaldo.gutter Reginaldo Gutter

    Great Tut!!!

    I’m watching this series since Day 01 and I got say is the best Tut I found so far.
    I’ve worked on this one and I got a sofisticated version of this gallery. I even have a “Delete Image” option. And everything is done in one page.
    I’m also using the Session Library to show some messages along the process.

    I’m in love with Codeigniter!

  • http://twitter.com/AstroCat87 PsyCat

    Hi and thanks for this tutorial. Everything works on my installation except that it can’t access the thumbs folder. in the model, the get_images() throws this error “404 Page Not Found –> uploaded_images”. THat’s when it goes to load the thumbnails. It actually uploads the images and creates the thumbnails perfectly but it won’t read them. Does anyone have an idea what the problem is?

  • Cristi

    Hi. Nice tutorial. Thanks. One question though… How can I upload multiple images using only one upload input field? Thank you.

  • HonzaEl

    Hi,
    Great tutorial. Can anyone tell me, if there is a mistake in this part?

    $image_data = $this->upload->data();

    $config = array(

    ‘source_image’ => $image_data['full_path'],

    ‘new_image’ => $this->gallery_path . ‘/thumbs’,

    ‘maintain_ration’ => true,

    ‘width’ => 150,

    ‘height’ => 100

    );

    $this->load->library(‘image_lib’, $config);

    $this->image_lib->resize();

    Because only the part, where I want to create a thumb does not work.

    The part before – uploading the file works. And the part after – getting images from folder and writing it on the page works too.

    • Mercedes

      Change ‘maintain_ration’ with ‘maintain_ratio’

      • http://twitter.com/honza_elias Jan Eliáš

        I got it! I dont have GD function, which is required for JPG image ;-)

  • shalev

    Thanks for the tutorials!!
    I can’t seem to download day 9 though.

    • Kunal

      Same here, great tutorial. However the mp4 version of this lesson, doesn’t seem to work.

  • http://imadalin.ro/ Madalin Ignisca

    mp4 link doesn’t works anymore and the tutorial can’t be watched on android tablets.

  • Dave

    It’s a wonderful video tutorial.

    I could not make it work in the beginning (no image in the folder without any error) but later on I figure out myupload_max_filesize (in php.ini config file) is set to 2M. I increased it to 10M and everything is good.

  • http://www.facebook.com/antonio.armstrong.31 Antonio Armstrong

    i cant even get the first part of this to work i get an error on the first upload

  • souhila

    pleaaaaase how we use a helper download files using codeigniter

← Older Comments