CakePHP2で画像アップロードプラグインである「Upload」を試してみた

みなさんこんにちは!

最近画像アップロードプラグインを色々試しているのでメモしておきますー

今日は「Upload」というプラグインで画像をアップしてみようと思います!
それではいってみましょー!

このプラグインとしての特徴としては

  • 画像をアップロードする機構を提供するがヘルパーは提供しない(自作ヘルパーの必要性)
  • サムネイルが作れる(Imagickが必要)
  • PDFのアップロードも可能

くらいでしょうか。アップロード処理に必要なものは大体揃ってるイメージです。

CakePHPとUploadのインストール

ここらへんはComposerでちょちょっと!

composer.json

{
    "name": "upload-example",
    "repositories": [
        {
            "type": "pear",
            "url": "http://pear.cakephp.org"
        }
    ],
    "require": {
        "pear-cakephp/cakephp": "2.4.*",
        "josegonzalez/cakephp-upload": "1.0.0"
    }
}

インストール!

$ composer install

オールグリーンにする設定はこちらを参照!

bootstrap.phpにUploadプラグインを書くコードを書いて終了!

bootstrap.php

CakePlugin::load('Upload');

これでインストール終了です!

Uploadプラグインの設定

それではコード書いていきましょう。

まずは

Usersテーブルを作成し、アップロードした画像パスを保存する領域も作っておきましょう。

CREATE table users (
    `id` int(10) unsigned NOT NULL auto_increment,
    `username` varchar(20) NOT NULL,
    `photo` varchar(255) DEFAULT NULL,
    `photo_dir` varchar(255) DEFAULT NULL,
    PRIMARY KEY (`id`)
);

app/Model/User.php

 [
            'photo' => [
                'fields' => [
                    'dir' => 'photo_dir'
                ]
            ]
        ]
    ];
}

こうしておけばphoto_dirに勝手に画像へのパスが入ります。

Viewはこんな感じ

View/Posts/index.ctp

Form->create('User', array('type' => 'file')); ?>
    Form->input('User.username'); ?>
    Form->input('User.photo', array('type' => 'file')); ?>
    Form->input('User.photo_dir', array('type' => 'hidden')); ?>
Form->end('Submit'); ?>

PostsControllerも簡潔な感じ

request->is('post')){
            $this->User->save($this->request->data);
        }
    }

}

これで画像がwebroot/files以下にアップされます!

アップロードする場所を変えたりサムネイル作ったりしてみる

User.phpを少し変えます

 [
            'photo' => [
                'fields' => [
                    'dir' => 'photo_dir'
                ],
                'thumbnailSizes' => [
                    'thumb150' => '150x150',
                    'normal' => '200x200',
                    'big' => '500x500'
                ],
                'path' => '{ROOT}tmp{DS}files{DS}{model}{DS}{field}{DS}',
                'thumbnailMethod' => 'php'
            ]
        ]
    ];
}

画像をアップロードする場所をとりあえずtmpフォルダに変えました。なんとなく。
thumbnailSizesとして色々登録しておけばそのサイズに切り出してくれます。
thumbnailMethodでphpを指定していますが、imagickがない場合はこのオプションを指定しておくとimagickではなくphpでリサイズを行ってくれます。

これで先ほどのViewからアップロードしてみてください。
tmpフォルダにアップされたはずです。
あとアップロードされた画像の前にbigとかnormalとかついたはずです。こんな感じでリサイズされるってことですね!

最後に

いかがでしたでしょうか。
画像アップロードできましたか?
アップロード処理は結構時間がかかる部分なのでこういう便利なプラグインを使ってサクッと終わらせたいですね!

定番レシピを勉強するならこれ!