WEBOPIXEL

CakePHPのファイルアップロードプラグイン「UploadPack」を使ってみた

Posted: 2011.01.27 / Category: CakePHP / Tag: 

CakePHPってすごい機能が満載ですが、ファイルアップロードに関しては標準機能ではさくっとできないっぽいです。(たぶん)
そんな感じなのでいろいろとプラグインがあるらしいですが、この記事では「UploadPack」というのを使用してみます。
※CakePHPのバージョンは1.3です。

Sponsored Link

「UploadPack」をインストールする

まずはファイルを以下ダウンロードしましょう。

szajbus / uploadpack

解凍したフォルダを「upload_pack」にリネームして、「app」→「plugins」にコピーします。
これでインストール完了です。

データベース(テーブル)作成

アップロードしたファイルの情報を入れるテーブルです。
最低限idとファイル名を入れるカラムを作成します。
ファイル名のカラムは「xxxx_file_name」という名前で作成しないといけないようです。

SQL

		CREATE table picts (
			`id` bigint(20) unsigned NOT NULL auto_increment,
			`item_file_name` varchar(255),
			PRIMARY KEY  (`id`)
		) ENGINE=MyISAM  DEFAULT CHARSET=utf8;
	

とりあえず動く状態にする。

models -> pict.php

		class Pict extends AppModel {
			var $name = 'Pict';
			var $actsAs = array(
				'UploadPack.Upload' => array(
					'item' => array(
						'styles' => array(
							'thumb' => '80x80'
						)
					)
				)
			);
		}
	

モデルではサムネイルのサイズや名前などを設定してます。

controllers -> picts_controller.php

		class PictsController extends AppController {
			var $name = 'Picts';
			var $uses = array('Pict');
			var $helpers = array('Form', 'UploadPack.Upload');
		
			function index() {
				$data = $this->Pict->find('all');
				$this->set('result', $data);
			} 
			
			function add() {
				if (!empty($this->data)) {
					if ($this->Pict->save($this->data)) {
						$this->redirect('/picts/');
					}
				}
			}
		}
	

コントローラーでは一覧を表示する「index」とデータベースに保存する「add」を作成しました。
特にアップロードするファイルのことを意識しないでsaveするだけでいいんですね。
「$helpers」を追加するのを忘れずに。

views -> picts -> add.php

	<?php
	echo $form->create('Picts', array('type' => 'file'));
	echo $form->file('Pict.item');
	echo $form->end('アップロード');
	?>
	

ビューの「add.php」は普通にファイルアップロードのフォームを作成するだけですね。

views -> picts -> index.php

	<?php
	foreach ($result as $value) {
		echo "<h3>元の画像</h3>";
		echo $upload->image($value, 'Pict.item');
		echo "<h3>サムネイル</h3>";
		echo $upload->image($value, 'Pict.item', array('style' => 'thumb'));
		echo "<hr />";
	}
	?>
	

画像の表示は「UploadHelper」で行います。
「$upload->image」でimgタグも自動的に作成され表示してくれます。
画像パスだけを表示させたいときは「$upload->url」です。
最後にファイルを保存するフォルダを作成します。デフォルトでは以下になります。

app\webroot\upload\picts

これで「/picts/add/」にアクセスして画像をアップロードする処理が完成しました。
これは簡単でいいですね。

バリデーション

バリデーションもモデルに指定するだけで一通りのことはできるようです。

models -> pict.php

	var $validate = array(
		'item' => array(
			'maxSize' => array(
				'rule' => array('attachmentMaxSize', 1048576),
				'message' => '1MB以下のファイルにしてください。'
			),
			'minSize' => array(
				'rule' => array('attachmentMinSize', 1024),
				'message' => '1KB以上にしてください。'
			)
		)
	);
	

「attachmentMaxSize」「attachmentMinSize」でファイルサイズを指定できます。

models -> pict.php

	var $validate = array(
		'item' => array(
			'rule' => array('attachmentContentType', array('image/jpeg', 'image/gif', 'image/png')),
			'message' => 'jpg,gif,pngのみアップロードできます。'
		)
	);
	

「attachmentContentType」でファイルタイプを指定できます。

models -> pict.php

	var $validate = array(
		'item' => array(
			'minWidth' => array(
				'rule' => array('minWidth', '100'),
				'message' => 'Widthを100px以上にしてください。'
			),
			'maxWidth' => array(
				'rule' => array('maxWidth', '600'),
				'message' => 'Widthを600px以下にしてください。'
			)
		)
	);
	

「minWidth」「maxWidth」「minHeight」「maxHeight」で画像のピクセルサイズを指定できます。

ファイルパスの変更

デフォルトではファイルをがアップロードされる場所は「upload→モデル名→ID」ですが、変更することもできます。
パスの設定はあらかじめ設定されている「key(文字列)」を組み合わせることで設定できます。
たとえば以下のようにすれば「webroot」の「img」ディレクトリに保存されます。

	var $actsAs = array(
		'UploadPack.Upload' => array(
			'item' => array(
				'path' => ':webroot/img/:basename_:style.:extension'
			)
		)
	);