April 10, 2017

Filemanager for codeigniter

Opencart filemanager for codeigniter is available here. You can easily create folder, delete folder, upload image, delete image . It also supports opencart image cache library which creates required size image and out it under cache folder to use.

Watch the Working Video at https://youtu.be/SnsA5sL2FhQ



or open below directory


I have been using opencart and very adroit in it. Since i got an codeigniter project i was so much missing opencart filemanager library for my project . I dig a lot of supports forum for Codeigniter image libraries But couldnt found one, So i decided to build it myself.

Steps involving building this up.

Quick Setting Up:

Few constants filemanager do uses so i didn’t took it in CI config array. Instead i took this as it is as constants. Put it under


  • Ubuntu/Linex

define(‘DIR_IMAGE’, ‘/var/www/html/ci/image/’);
define(‘DIR_CATALOG’, ‘/var/www/html/ci/catalog/’);

  • WAMP under C:/wamp64 folder

define(‘DIR_IMAGE’, ‘C:/wamp64/www/ci/image/’);
define(‘DIR_CATALOG’, ‘C:/wamp64/www/ci/catalog/’);


Include Image Helper library:

I will be using an helper library to make editing over images. It will perform all editing actions like getting size, height , width and resizing .You should put this file under system/helpers/image_helper.php

View file image_helper.php

Create a Image model

Create a model name Model_tool_image.php. So you can call this at every controller while in use. This will be calling your image helper library to perform resize options.

Now what it does?

It takes a image file path and width and height to create a new image of desired size. Also creates a cache path for this new image and returns this new image path with size string along with its name.

So basically we are creating on runtime desired size images by this function and this can be called at every controller by loading this model.

Creating a 100×100 size image from $filename.

$this->load->model(“model_tool_image”);  /* loading a model */

$this->model_tool_image->resize($filename, );  /* resizing and getting a cache image */

Put the below file at application/models/Model_tool_image.php

class Model_tool_image extends CI_model {

public function resize($filename, $width, $height) {

if (!is_file(DIR_IMAGE . $filename) || substr(str_replace(‘\\’, ‘/’, realpath(DIR_IMAGE . $filename)), 0, strlen(DIR_IMAGE)) != DIR_IMAGE) {

$extension = pathinfo($filename, PATHINFO_EXTENSION);

$image_old = $filename;
$image_new = ‘cache/’ . substr($filename, 0, strrpos($filename, ‘.’)) . ‘-‘ . $width . ‘x’ . $height . ‘.’ . $extension;

if (!is_file(DIR_IMAGE . $image_new) || (filectime(DIR_IMAGE . $image_old) > filectime(DIR_IMAGE . $image_new))) {
list($width_orig, $height_orig, $image_type) = getimagesize(DIR_IMAGE . $image_old);

if (!in_array($image_type, array(IMAGETYPE_PNG, IMAGETYPE_JPEG, IMAGETYPE_GIF))) {
return DIR_IMAGE . $image_old;

$path = ”;

$directories = explode(‘/’, dirname($image_new));

foreach ($directories as $directory) {
$path = $path . ‘/’ . $directory;

if (!is_dir(DIR_IMAGE . $path)) {
@mkdir(DIR_IMAGE . $path, 0777);

if ($width_orig != $width || $height_orig != $height) {
$image = new Image(DIR_IMAGE . $image_old);
$image->resize($width, $height);
$image->save(DIR_IMAGE . $image_new);
} else {
copy(DIR_IMAGE . $image_old, DIR_IMAGE . $image_new);

return site_url(). ‘image/’ . $image_new;



Create a filemanager controller

Now you want to make sure a controller need to call which displays all the folders and images of a image directory.  This will have

  • View  directory and images
  • Create folder action
  • Delete folder Action
  • Add image in directory action
  • Delete image action
  • Pagination
  • Search in directory

Create a filemanager View

Create filemanager view for all above tasks combined. Which will be having all ajax calls for these actions and rendering the model again and again.


Create a HTML view

Now the second last step of creating  a HTML view. Make sure you have defined all the variables at corresponding controllers. Make sure anchor and input field are under a same tag for multiple.

<a href=”” id=”thumb-image” data-toggle=”image” class=”img-thumbnail”>

<img src=”<?php echo $thumb; ?>” alt=”” title=”” data-placeholder=”<?php echo $placeholder; ?>” />


<input type=”hidden” name=”image” value=”<?php echo $image; ?>” id=”input-image” />

Create a ajax Call.

Now for data-toggle=”image” and selection add this js file to the header.




The following project depends on

  • Codeigniter pretty url enabled. which includes $config[‘index_page’] = ”; in CI config.php and a supporting .htaccess file.
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.php/$1 [L]


  • Make sure form,url and image helper are loaded.
  • jQuery, Bootstrap JS, Bootstrao CSS and Font awesome icons library is added.


You may also like...