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
Newer Comments →
  • ShadowAssassin

    Very nice screencast =D

  • ShadowAssassin

    Very useful screencast
    Thank you!

  • ShadowAssassin

    Just to let you know: sorry about previous comments, my internet lagged, this is day 8, not 9 ;)

    And this video hasn’t change (at least when I was viewing it, this is day 7 video :( )

    • http://www.jeffrey-way.com Jeffrey Way

      Sorry guys, the video has been updated. My fault. :)

  • Callum

    Oh really shadowAssassin? And what was the screencast about then?

    (Btw for the rest of us, its the Day 8 screencast :( )

  • http://twitter.com/KGTheNerd Karthik

    Thanks burak.

  • http://www.phpandstuff.com Burak
  • http://www.tastybytes.net brian

    non video walk through?

    scanning code is much quicker for me.

    • Jim

      Download source ?

  • dave

    Great video. Thanks for continuing the series.

    SMALL BLOOPER.

    In the image manipulation part of the video, a part of the config array was incorrect.
    A maintain_ration (note the n) key was set, instead of the intended maintain_ratio.
    However, since the default value of maintain_ratio is true, the code still produced the intended result.

    Just a note for people who might use the code and change the value to false and wonder why it is not working.

    • http://www.phpandstuff.com Burak
      Author

      Yes, sorry about that.

  • http://mobiland.az/ AzeriFire

    Sağ ol qardaş. Cİ-yə yeni başlamışam, kömək olar mənə.
    —————
    Thx bro. I am new with CI, this tutorial series are helpfull.

  • Tom Van Assche

    :heart:

    Dont stop at 10! :)

  • happyBtn

    Fantastic! Question:
    Does your uploaded images folder end up outside of your webroot or within it?

    • http://www.phpandstuff.com Burak
      Author

      It is under:

      c:\wamp\www\ci_series\images

      So yea, it is within the web root. Otherwise I wouldn’t be able to load images directly in the browser.

  • Khalil

    Thankyou Burak

    you are going really very good. I like CI series

  • Tim

    In the article there are two day 7s. One is actually day 8. ;)

    “Day 7: Pagination
    Day 7: AJAX”

    should be…
    “Day 7: Pagination
    Day 8: AJAX”

    • http://www.jeffrey-way.com Jeffrey Way

      Thanks – fixed.

  • Sunil

    great tutorial

  • Sunil

    is there a way to save pictures in a database instead of file system ? This allows to upload 1 at a time. How to upload a directory ?

    • http://www.phpandstuff.com Burak
      Author

      1) You can store the contents of the image in a BLOB column.

      2) You can only upload 1 file at a time. It’s a browser and HTML spec limitation. However, flash based uploaders can do multiple-file uploads.

      • Jim

        I belive you can do this in JQuery as welll.

        Do a search for `jquery multiple file uploader`

      • http://www.phpandstuff.com Burak
        Author

        That plugin just creates multiple upload inputs dynamically. You still have to select files one by one.

        With a flash based uploader, you can actually select multiple files with a single step.

  • cem

    Teşekkürler Burak.
    Nice one again…

  • Ciprian

    i love the new series ,you rock.
    thanks for the new series and please keep them comming :D
    bye

  • eric

    Awesome Burak!

    Jeffrey this is the answer to you being stretched thin. Keep finding talented folks like Burak to backfill you so you can do other things and so that you can crank out this awesome content!

  • Üzeyir Süleymanlı

    What a great screencast Burak :) Thanks a lot!

  • Bretticus

    Good stuff Burak. I see you are a good PHP hacker as well as a CI wrangler.

    I hadn’t considered fat models. I tend to write fat controllers and thin models. I can certainly see the advantage to fat models. Question, did you use a model because of the possibility of adding database features? Would your notion of a gallery model be better served as a library instead (without the Model extended overhead?)

    I like that you used class properties for your paths. I think perhaps it would have been worthwhile to point out that doing that also makes it easy to change those properties before do_upload is called in case you need to change the image folder path.

    Great stuff! Thanks for taking the reins.

    • http://www.phpandstuff.com Burak
      Author

      Models can be any kind of entity. It doesn’t necessarily have to be database related; but they usually are. Of course, if this was a bigger project, the gallery model would probably be using the database.

      I don’t think that would fit the definition of a Library. Those are usually meant to be utility classes.

      Models are more reusable than Controllers. That’s why it is better to let them do most of the work.

      • Bretticus

        Certainly, in the MVC paradigm, a model is all that you say. However, in CodeIgniter framework, it would appear that a model is more database-centric. that’s why I asked. For example, from the manual on What is a Model it states, “Models are PHP classes that are designed to work with information in your database.” I suppose perhaps the model folder is where this belongs, but do you get any benefit for extending the Model class in PHP besides a registry of all the other objects (which you can get by calling get_instance() otherwise?)

      • Bretticus

        I just peaked at the Model core class. Besides the constructor, it has one method:

        _assign_libraries()

        The documentation states:

        /**
        * Assign Libraries
        *
        * Creates local references to all currently instantiated objects
        * so that any syntax that can be legally used in a controller
        * can be used within models.
        *
        * @access private
        */

        I think the class documentation clearly supports your position. Thanks for bringing this to light.

  • Silverboy

    Thanks Burak.Keep them coming :)

  • Walter

    This series rocks!
    Thanks Burak.

  • http://www.georun.com georun974

    Nice one !

  • http://twitter.com/adesignblog Another Design Blog

    For long time i was looking for a real useful and good article relating CodeIgniter! Thank you!

  • Ben

    Small typo in code:
    ‘maintain_ration’ => true

    (should be ratio, but shouldn’t matter as true is the default anyway).

    Is it easy to resize and crop images, to ensure thumbs will be the same size if uploaded originals are not the same ratio as one another?

    Perfect timing for this, was looking to work on a custom gallery in CI.

    • Ben

      Just saw dave picked up that typo.. my bad.

  • ELijah

    Burak, thnx for ur tuts.
    I liked this one more than previous, cause in this tut your speech is more fluent.

    Also a question: what tutorial about the css “after”? Can u give a link?

  • http://www.accentinteractive.nl JoostV

    Here’s a handy lib I wrote for a functionality such as an image gallery.

    It enables you to uplaod a single image and store serval sizes while uplaoding, including cropped and square images (squared from the center). Escpecially squared images make a nice, balanced thumbnail layout

    http://codeigniter.com/wiki/Category:Libraries::Images/

  • http://www.accentinteractive.nl JoostV

    Here’s a Codeigniter image lib I wrote you may find handy to use in a functionality such as an image gallery.

    It enables you to uplaod a single image and store serval sizes while uplaoding, including cropped and square images (squared from the center). Escpecially squared images make a nice, balanced thumbnail layout

    http://codeigniter.com/wiki/Category:Libraries::Images/

  • http://www.accentinteractive.nl JoostV

    Here’s a Codeigniter image lib I wrote you may find handy to use in a functionality such as an image gallery. Call $htis->images->square() to create a thums, that is squared from the center. Squared images make a nice, balanced thumbnail layout

    http://codeigniter.com/wiki/Category:Libraries::Images/

  • Carlos Caniguante

    Please Burak don’t stop this series!!

  • Tom Van Assche

    Id love to see one where you combine some kind of a front-end JS banner carrousel with a back-end panel.

  • Brad

    Excellent Burak, Well done and very useful!

  • http://sonergonul.com Soner Gönül

    Thanks !

    That’s great !

  • Klon

    Thanks for the tutorial Burak, it was really helpful as I am just about to implement this functionality on my site.

    I’ve got a question for you guys, I am currently working on a site that may grow up up to a few thousand users, all of which will have to upload 8-10 pictures.
    What is the best practice of storing the data? Would it be better to save pictures in blob fields within database or in a separate folder?

    • http://www.phpandstuff.com Burak
      Author

      For a site that has potential to grow big, I would keep images as files rather than blog fields.

      Also make sure you don’t have a single folder with thousands of files in it. It can slow down some file systems.

  • Klon

    Thanks for the tutorial Burak, it was really helpful as I am just about to implement this functionality on my site.

    I’ve got a question for you guys, I am currently working on a site that may grow up up to a few thousand users, all of which will have to upload 8-10 pictures.
    What is the best practice of storing the data? Would it be better to save pictures in blob fields within database or in a separate folder?

    //for moderators: I already posted this question, but it did not appear, if it is inapropriate to ask it here, should I not have received an email with a notification?

  • http://tutsvalley.com Slobodan Kustrimovic

    Thanks Burak :)

    BTW found a tiny typo, in the CSS you typed “font-familiy” instead of “font-family” :)

  • http://jonweb.co.uk Jon Cousins

    How did you get Apatana Studio to recognise the codeigniter functions and how did it auto complete?

    • http://www.phpandstuff.com Burak
      Author

      I didn’t do anything special. I’m using the Aptana PHP version (which is discontinues I believe).

  • Selçuk

    Great one…
    Teşekkürler Burak…

  • Chris

    Great Screencast guys! Keep up the GREAT WORK! I love it!

  • Chris

    Great Screencast guys! Keep up the GREAT WORK! I love it! I I hope I can see one on CRUD. I see the others with basic db stuff but I wonder if you can do a real CRUD tut where you combine all of the things we’ve learned so far.

  • Ben

    Download link isn’t working

  • http://www.ChoiZ.Fr ChoiZ

    @Burak thank you for the “blip” link :)

  • Kasper

    Theese tuts are GREAT! I’ve really learned a lot about codeigniter and what the potentials are of it :) A few suggestions could be as some other guys mentioned a combined tut where you put it all together. And also LOTS of more added security to the forms and the site in general :D

    Best regards
    Buch

  • Chris

    Hey Thanks Burak for this tutorial! I was wondering if you could do a mini admin tutorial with CI that puts it all together.

  • http://www.radiart.pl Radi

    Great Work! Keep going

  • FingerLing

    2:21 – how did you do it in aptana, i can found how to make this… Thanks for reply :)

  • ed0

    Great totorial. but I got error message like this:

    “Your server does not support the GD function required to process this type of image.”
    what’s wrong??

    • http://www.enciende.cl Jorge

      That’s because you don’t have the GD extension enabled or installed in your php configuration.
      You should see something like GD Support in php_info()

      GD Installation

  • Sunil

    Hi Burak,

    Very impressive !!!

    After uploading if you made a mistake and wanted to delete, What would be the right solution ?. Permission to image folder is set to 777.

    Thanks
    Sunil

  • http://gravityfx.org/ emcgfx

    Direct Link to the video:

    Day 9: File Uploading and Image Manipulation
    http://a-mirror.video2.blip.tv/NETTUTS-CodeIgniterFromScratchDay9668.flv

  • Randy

    I am using TextMate as my editor and I don’t have the code complete functionality that I see you using.
    Is that specific to Aptana?

Newer Comments →