2011年12月3日

Yii Framework: 画像アップロードビヘイビアを作る

※ 2012-10-15に更新しました

 画像アップロードビヘイビアを作るにあたり、エクステンションの cfile と image を内部で使用しています。使い方はそれぞれのリンクを参考にしてください。

準備

データベースにテーブルを作成します。画像データは特定のディレクトリに保存し、データベースにはファイル名を保存する形をとっています。以下はテーブルの例。

CREATE TABLE `item` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(32) NOT NULL,
  `image` varchar(64)  NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

あと、あらかじめいくつかのディレクトリ, ファイルを作成します。
  • webroot/images/empty.jpg
  • webroot/images/tmp/thumb/
  • webroot/images/hoge/thumb/

hoge 部分はビヘイビアを使用したいモデルのテーブル名、empty.jpg は画像フィールドが必須でない場合などに使われる画像です。必須の場合は特に必要ありません。tmp は画像確認の際に一時的に画像ファイルが保管されるディレクトリです。
webroot/
...
images/
empty.jpg
tmp/
thumb/
hoge/
thumb/
...
view raw gistfile1.txt hosted with ❤ by GitHub
cfile, image エクステンションを使えるように protected/config/main.php に以下を追加。
<?php
'import' => array(
...
'application.helpers.*',
),
'modules' => array(
...
),
'components' => array(
'file' => array(
'class' => 'ext.file.CFile',
),
'image' => array(
'class' => 'ext.image.CImageComponent',
),
...
view raw gistfile1.php hosted with ❤ by GitHub
あと、cfile には OS の違いによって挙動が変わってくる箇所を発見したので、以下のメソッドのコード部分をコメントアウトします。
<?php
private function resolveDestPath($fileDest)
{
//if (strpos($fileDest, DIRECTORY_SEPARATOR)===false)
//return $this->dirname.DIRECTORY_SEPARATOR.$fileDest;
return $this->realPath($fileDest);
}
view raw CFile.php hosted with ❤ by GitHub
あらかじめ作っておいた ImageUploadBehavior.php を protected/components下 に置く。
<?php
/**
* ImageUploadBehavior class file.
*/
class ImageUploadBehavior extends CActiveRecordBehavior
{
/**
* @var string the file upload column name
*/
public $uploadColumn = 'image';
/**
* @var boolean whether creates the thumbnail
*/
public $createThumb = false;
/**
* @var integer purge limit (second)
*/
public $purgeLimit = 600;
/**
* @var string empty image
*/
public $emptyImage = 'empty.jpg';
/**
* @var integer width
*/
public $width = 200;
/**
* @var integer height
*/
public $height = 140;
/**
* @var integer quality
*/
public $quality = 90;
private $_dir;
private $_thumbDir;
private $_tmpDir = 'images/tmp/';
private $_tmpThumbDir = 'images/tmp/thumb/';
private $_oldImage;
/**
* @see CBehavior::attach()
*/
public function attach($owner)
{
parent::attach($owner);
$this->_dir = 'images/'.$this->getOwner()->tableName().'/';
$this->_thumbDir = 'images/'.$this->getOwner()->tableName().'/thumb/';
}
/**
* @see CModelBehavior::afterValidate()
*/
public function afterValidate($event)
{
if ($this->owner->scenario !== 'update')
{
$this->purge();
if (!$this->owner->hasErrors())
{
$this->upload();
$this->resize();
}
}
}
/**
* @see CActiveRecordBehavior::afterSave()
*/
public function afterSave($event)
{
if ($this->owner->scenario !== 'update')
{
if ($this->_oldImage)
$this->delete();
$this->move();
}
}
/**
* @see CActiveRecordBehavior::afterDelete()
*/
public function afterDelete($event)
{
$this->delete();
}
/**
* @see CActiveRecordBehavior::afterFind()
*/
public function afterFind($event)
{
$this->_oldImage = $this->owner->image;
}
/**
* Purges the files.
*/
protected function purge()
{
foreach (array($this->_tmpDir, $this->_tmpThumbDir) as $path)
{
$files = Yii::app()->file->set($path.'*');
foreach (glob($files->realPath) as $file)
{
if (time() - filemtime($file) > $this->purgeLimit)
@unlink($file);
}
}
}
/**
* Uploads a new file.
*/
protected function upload()
{
$file = Yii::app()->file->set(ucfirst($this->owner->tableName()).'['.$this->uploadColumn.']');
if (!$file->isUploaded)
$file = Yii::app()->file->set('images/'.$this->emptyImage);
$this->owner->image = md5(uniqid(rand(), true)).'.'.$file->extension;
$file->copy($this->_tmpDir.$this->owner->image);
}
/**
* Resizes the file.
*/
protected function resize()
{
$file = Yii::app()->image->load($this->_tmpDir.$this->owner->image);
$file->resize($this->width, $this->height)->quality($this->quality);
if (!$this->createThumb)
$file->save($this->_tmpDir.$this->owner->image);
else
$file->save($this->_tmpThumbDir.$this->owner->image);
}
/**
* Moves the upload file.
*/
protected function move()
{
$paths = array(
$this->_tmpDir => $this->_dir,
$this->_tmpThumbDir => $this->_thumbDir,
);
foreach ($paths as $tmpPath => $path)
{
$file = Yii::app()->file->set($tmpPath.$this->owner->image);
if ($file->isFile)
$file->rename($path.$this->owner->image);
}
}
/**
* Deletes the upload file.
*/
protected function delete()
{
$image = $this->owner->image;
if ($this->owner->scenario === 'change')
$image = $this->_oldImage;
foreach (array($this->_dir, $this->_thumbDir) as $path)
{
$file = Yii::app()->file->set($path.$image);
if ($file->isFile)
$file->delete();
}
}
}
view raw gistfile1.php hosted with ❤ by GitHub

ImageUploadBehaviorの機能としては以下。
  • モデルのイベントを利用して、画像のアップロードが自動で行われる (確認画面等にも対応)
  • サムネイル画像を作成できる
  • また、サムネイル画像のサイズ、画質などを任意に指定できる

では ImageUploadBehavior を使いたいモデルに以下を追加します (今回は例として Item モデルで使う場合) 。
<?php
/**
* Item class file.
*/
class Item extends CActiveRecord
{
...
/**
* @see CModel::rules()
*/
public function rules()
{
return array(
array('title', 'length', 'max'=>50),
array(
'image',
'file',
'safe' => true,
//'allowEmpty' => true,
'types' => 'jpg,png,gif',
'maxSize' => 1024*1024*1,
'message' => '{attribute}が未選択です',
'on' => 'insert,change',
),
);
}
/**
* @see CModel::behaviors()
*/
public function behaviors()
{
return array(
'ImageUploadBehavior' => array(
'class' => 'application.components.ImageUploadBehavior',
'createThumb' => true,
),
);
}
}
view raw Item.php hosted with ❤ by GitHub

rules() については CFileValidator を参考にしてみてください。フレームワークのバージョン 1.1.11, 1.1.12 などで追加されたメソッド、プロパティなどがいくつかあります。とりあえず 1.1.12 を使用している場合 'safe' => true にしないと確認画面等に対応できないことがわかったりしました。あと 'on' => 'insert,change' で、シナリオが insert, change 時のみ、画像に関するバリデーションを実行するように設定しています。

behaviors() には、使いたいビヘイビアのファイル名、クラスのパスを書きます。また、オプションでパラメータの値を指定できます。これはビヘイビアファイルの public なプロパティを上書きする形になり、上記のコードの場合、デフォルトである createThumb = false; を true に上書きしています。


コントローラの例。
<?php
class ItemController extends Controller
{
...
/**
* Creates a new item.
*/
public function actionCreate()
{
$item = new Item();
$this->commonEditAction($item);
}
/**
* Updates a particular item.
*/
public function actionUpdate()
{
$item = $this->loadModel();
$this->commonEditAction($item, array('title'));
}
/**
* Changes a particular item.
*/
public function actionChange()
{
$item = $this->loadModel();
$item->setScenario('change');
$this->commonEditAction($item, array('image'));
}
/**
* Edits a common action.
* @param Item $item item model
* @param array $attributes list of attributes that need to be saved.
*/
protected function commonEditAction($item, $attributes=null)
{
if (isset($_POST['confirm']))
{
$item->attributes = $_POST['Item'];
if ($item->validate())
{
if ($item->scenario !== 'update')
$_POST['Item']['image'] = $item->image;
$this->setPageState('x', $_POST['Item']);
$this->render('_formConfirm', compact('item'));
return;
}
}
else if (isset($_POST['back']))
$item->attributes = $this->getPageState('x');
else if (isset($_POST['finish']))
{
$item->attributes = $this->getPageState('x');
$item->save(false, $attributes);
$this->redirect(array('index'));
}
$this->render('_form', compact('item'));
}
...
}
view raw gistfile1.php hosted with ❤ by GitHub
actionCreate(), actionUpdate(), actionChange() など、それぞれのコードが似ているので commonEditAction() にまとめています ($this->loadModel() は特定の ID のデータを1件取得していると思ってください) 。

一応のルールとしては、以下のようになっています。
  • actionUpdate() では画像カラム以外のカラムの更新を行う
  • actionChange() では画像カラムのみの更新を行う
  • actionChange() ではシナリオを 'change' にセットする
  • シナリオが 'update' ではない場合、バリデーション後に $_POST['Item']['image'] に $item->image を代入する


最後にビューです。
_form.php:
<div class="form">
<?php if ($item->scenario !== 'update'): ?>
<?php echo CHtml::statefulForm('', 'post', array('enctype' => 'multipart/form-data')); ?>
<?php echo CHtml::hiddenField('MAX_FILE_SIZE', '1000000'); ?>
<?php else: ?>
<?php echo CHtml::statefulForm(); ?>
<?php endif; ?>
<?php echo CHtml::errorSummary($item); ?>
<?php if ($item->scenario !== 'change'): ?>
<div class="row">
<?php echo CHtml::activeLabel($item, 'title'); ?>
<?php echo CHtml::activeTextField($item, 'title'); ?>
</div><!-- /.row -->
<?php endif; ?>
<?php if ($item->scenario !== 'update'): ?>
<div class="row">
<?php echo CHtml::activeLabel($item, 'image'); ?>
<?php echo CHtml::activeFileField($item, 'image'); ?>
</div><!-- /.row -->
<?php endif; ?>
<div class="row">
<?php echo CHtml::submitButton('入力した内容を確認する', array('name' => 'confirm')); ?>
</div><!-- /.row -->
</div><!-- /.form -->
view raw _form.phtml hosted with ❤ by GitHub
_formConfirm.php:
<div class="form">
<?php echo CHtml::statefulForm(); ?>
<?php if ($item->scenario !== 'change'): ?>
<div class="row">
<?php echo CHtml::activeLabel($item, 'title'); ?>
<?php echo CHtml::encode($item->title); ?>
</div><!-- /.row -->
<?php endif; ?>
<?php if ($item->scenario !== 'update'): ?>
<div class="row">
<?php echo CHtml::activeLabel($item, 'image'); ?>
<?php echo CHtml::image(Yii::app()->baseUrl.'/images/tmp/'.$item->image); ?>
</div><!-- /.row -->
<?php endif; ?>
<div class="row">
<?php echo CHtml::submitButton('戻る', array('name' => 'back')); ?>
<?php echo CHtml::submitButton('完了する', array('name' => 'finish')); ?>
</div><!-- /.row -->
</div><!-- /.form -->
view raw gistfile1.phtml hosted with ❤ by GitHub
create, update, change アクションをすべて _form.php , _formConfirm.php にまとめていて、モデルのシナリオによって、表示する箇所などを指定しています。結果ビューが見にくくなる場合がありますので、その場合は個別にビューファイルを作ってください。

jamband/yii-image-upload-behavior
https://github.com/jamband/yii-image-upload-behavior


参考リンク

カテゴリー:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)