How to save images using Uploadpack in Cakephp2

Overview


Today I want to show you an easy way to handle file uploads in CakePHP.

We are going to implement a functionality to upload images to the database using a plugin called “UploadPack”.

“UploadPack is a plugin that makes file uploads in CakePHP as easy as possible. It works with almost no configuration, but if you need more flexibility you can easily override default settings.”

So let’s get started!


(1. Prepare the table for the images

This time I prepared the “images” table.
The important thing is to prepare a column named “_file_name” like “img01_file_name”. You can use the following query for testing!


CREATE TABLE `images` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`image_file_name` varchar(255) NOT NULL,
`title` varchar(255) NOT NULL,
`mail_address` varchar(255) NOT NULL,
`created` datetime NOT NULL,
PRIMARY KEY (`id`))

 

(2. Setting up the plugins into your CakePHP project

     Steps to take

1. Download Uploadpack from the following GitHub link and place it in app / Plugin folder

https://github.com/szajbus/uploadpack

2. Change the name of the downloaded folder to upload_pack

3. Configure to load the plugin. Go to app/Config/bootstrap.php and find the following code and if you don’t find it, then add it to the end of the file. Or if it is commented then uncomment the line.

CakePlugin::loadAll();

 

(3. Setting the folder access authority

Change permissions of all files under the folder (upload) to save images. You should add the upload folder in the webroot! It’s for storing the images!

   app/webroot
mkdir upload
chmod 777 -R /upload

 

(4. Here’s the difficult part! Creating the Model, Controller, and the View!

You will be creating 4 files in the cakephp2 project. Model for handling the data for the image in the database. Controller for saving and displaying the images. And finally the view for the ImagesController. The code will be explaining it’s self, so good luck!

Model/Image.php
<?php
App::uses('AppModel', 'Model');

class Image extends AppModel{

        var $name = 'Image';
        var $actsAs = array(

                'UploadPack.Upload' => array(
                       
                        'img' => array(
                                'quality' => 95,
                                'path' => ':webroot/upload/:model/:style:id.:extension',
                                'styles' => array(
                                        'big' => '100w', 
                                        'small' => '80h', 
                                        'thumb' => '50x50',
                                ),
                        ),
                ),

                'Search.Searchable',
        );
        public $filterArgs = array(
                'id' => array('type' => 'value'),
                'title' => array('type' => 'like'),
                'img_file_name' => array('type' => 'like'),
                'mailaddress' => array('type' => 'like'),
                'created' => array('type' => 'value'),
        );
}

 

Controller/ImagesController.php
<?php

class ImagesController extends AppController {

        var $uses = array('Image'); // Use the Image model that you created earlier!

        public $components = array(
                'Paginator',
        );

        // Don't forget to write the helpers
        var $helpers = array('Form', 'UploadPack.Upload');

        public function index() {
                $this->set('images', $this->Image->find('all'));
        }

        public function add() {
                if (!empty($this->data)) {
                        if ($this->Image->save($this->data)) {
                               
                                $this->redirect('index');
                        }
                }
        }


}

?>

 

View/Images/index.ctp
<h1>UploadPack</h1>
<p>This is UploadPack Test!</p>
<h2><?php echo $this->Html->link("Add New Image", "/images/add/"); ?></h2>

<table>
        <tr>
                <th>TITLE</th>
                <th>IMAGE</th>
                <th>FILENAME</th>
                <th>MailAddress</th>
                <th>CREATED</th>
        </tr>

<div id="contents">

        <?php foreach($images as $image): ?>
        <tr>
                <td><?php echo $image['Image']['title'];?></td>
                <td><?php echo $this->Upload->uploadImage($image['Image'], 'Image.img', array(
                        // 'style' => 'original'
                        'style' => 'thumb'
                )); ?></td>
                <td><?php echo $image['Image']['img_file_name'];?></td>
                <td><?php echo $image['Image']['mailaddress'];?></td>
                <td><?php echo $image['Image']['created'];?></td>
        </tr>
        <?php endforeach;?>

        <div class="navigation">
                <?php echo $this->Paginator->next('Next Page'); ?>
        </div>

</div>

</table>

 

View/Images/add.ctp
<h1>Save new Image</h1>
<?php echo $this->Form->create('Image', array('type' => 'file')); ?>
<table>
        <tr>
                <th>TITLE</th>
                <td><?php echo $this->Form->text('Image.title'); ?></td>
        </tr>
        <tr>
                <th>Mail</th>
                <td><?php echo $this->Form->text('Image.mailaddress'); ?></td>
        </tr>
        <tr>
                <th>IMAGE</th>
        <td>
                <?php echo $this->Form->file('Image.img');?>
                <?php echo $this->Form->error('Image.img');?>
        </td>
</tr>
<tr>
<th></th>
<td>
<?php echo $this->Form->end('Save new Image');?></td>
</tr>
</table>

You finally made it! Did the sample for this tutorial work for you? I hope it did! But even if it didn’t work, you can debug it yourself or ask for help at StackOverflow!

Leave a Reply

Your email address will not be published. Required fields are marked *