For example, 'maxFile' is set to 1. After uploading first image it would be placed in directory with name '1'. Second uploaded image would be automaticly reside in directory with name '2'.

If variable 'generateName' is set to TRUE, then the behaviour will generate the filename instead of using original file name (MeioUpload way). The new file name is generated by the following PHP code: $new_filename = md5(uniqid(rand(), true));

Function _createThumbnail is also overrided. New parameters are added: maxDimension -> a, heightPortrait, widthLandscape. If maxDimension is set to 'a' (adjustable), then the thumbnail is created based on the orientation. heightPortrait and widthLandscape define maximal size of the sides respectively.

Note that user can not upload the images without using the database table to store information about uploads.

Controller 'ImageSelectsController' consists of two methods: set_instance and 'preview'. 'Set_instance' is used to assiciate data model with the controler. See the usage paragraph to know more about it.

'Preview' is the controller method with a view. Method extracts data from the associated data model and pass it to the view. This method has one parameter: $this->params['form']['selected']) It can contain the IDs of already selected items. The method sets two variables: 'allphotos', which contains paginated version of all images available for selection, and 'allselected', which contains all selected images.

File 'preview.ctp' dispalys double-sided regions to select images. You can customize the output by editing CSS or HTML source.

Div with ID 'leftimgs' contains images available for selection, div with ID 'rightimgs' contains selected images. Note, that selected data is not processed in any way. It is your responsibility to get the selected data and process it. One can easily do it with jQuery. Statement $("#rightimgs > div[selected]") returns all images from the right side.

0. Download and install MeioUpload. Be sure that you can use AJAX and jQuery in you CakePHP app.

1. Download the archive from github and extract it in 'plugins/image_select'. Note that if you install it in another directory, then you need to change the code in file '<plugin_dir>/views/image_selects/preview.ctp'. Search for the 'image_select' string.

2. Define the databse where you want to store the information about uploaded images. Let us consider that its name is 'photos'. There are correspondent controller, model and views. Besides we have the table 'cities' with all necessary things. The idea is that one city could have many photos assigned with it. Photos table should have primary key id,

3. Connect the behaviour. In your file 'app/models/photo.php' add:

Please note that currently thumbnail directory name is hard-coded in the
'preview.ctp'. My very next plan is to add a 'preview_link' field in the 
database table to store the name of the thumbnail folder.

4. Add fields to upload images in your 'app/views/photos/add.ctp': echo $form->create('Photo', array('type' => 'file')); ... echo $form->input('Photo.filename', array('type' => 'file')); echo $form->input('UserName', array('label' => __('Name', true)) );

   Field UserName is used to handle the name of the image entered by user. This name is stored in the database table, in field 'name'. I use name 'UserName' so that if this field is left blank, then the filename without extension is used as the human readable name.

5. To use the controller you should inherit your 'PhotosController' from 'ImageSelectsController'. Write this in your 'app/controlles/photos_controller.php': App::import('Controller', 'ImageSelect.ImageSelects'); class PhotosController extends ImageSelectsController

6. Add following beforeFilter method to your PhotosController: function beforeFilter() { $this->set_instance($this->modelKey); }

   Now you can use method 'preview' from your Photos controler.

7. We will use AJAX to add ability of association iamges with cities. Add CSS and JavaScript code from the plugin to the 'app/views/cities/add.ctp': echo $javascript->link('/image_select/js/image_upload.js', false); echo $html->css('/image_select/css/image_select.css', false);

8. Define somwhere the container for the multi-side selection element:

9. Add the following JS code to 'app/views/cities/add.ctp':

   <script type="text/javascript"> var selected = new Array(); //selected[0] = 2; // possible id for the selected images //selected[1] = 38; var data = new Object(); data.selected = selected; var reload_url = "url(array('controller'=>'photos', 'action'=>'preview'));?>"; $(document).ready(function() { loadPiece(reload_url, "#imageList", data); }); </script>

10. That is it! Now if you open the page to create the new city you will see the double sided element with photos.