Uppyは、ドラッグアンドドロップアップロード、プログレス表示、リジューム機能などを備えたオープンソースのファイルアップロードツールです。この記事では、UppyをCakePHP 5に統合する方法について詳しく解説します。

Uppyの特徴

Uppyは、複数のアップロード先（ローカルサーバー、AWS S3など）に対応しており、そのシンプルなAPIと豊富なプラグインにより、ウェブ開発におけるファイルアップロード機能の実装が容易になります。

環境設定

統合を行う前に、以下のソフトウェアをインストールしてください：

• PHP 8.1以降
• CakePHP 5.x
• Composer
• Node.jsとnpm

新しいCakePHPプロジェクトを作成するには：

composer create-project --prefer-dist cakephp/app:~5.0 myapp
cd myapp

統合手順

1. Uppyのインストール

npmを使用してUppyのパッケージをインストールします：

npm install @uppy/core @uppy/dashboard @uppy/xhr-upload

2. アップロードコントローラーの作成

CakePHPでファイルアップロード用のコントローラーを作成します：

bin/cake bake controller Uploads

3. サーバーサイド署名インターフェイスの実装

AWS S3の統合例を参考に、CakePHPで署名インターフェイスを実装します：

// src/Controller/UploadsController.php
public function sign() {
    $this->autoRender = false;
    $this->response = $this->response->withHeader('Access-Control-Allow-Origin', '*');
    
    $body = json_decode(file_get_contents('php://input'));
    $filename = $body->filename;
    $contentType = $body->contentType;
    
    // 署名ロジックをここに実装
    // ...
    
    $this->response->getBody()->write(json_encode([
        'method' => 'PUT',
        'url' => 'YOUR_SIGNED_URL',
        'headers' => [
            'content-type' => $contentType
        ]
    ]));
    return $this->response;
}

4. フロントエンドUppyの設定

CakePHPのビューファイルでUppyを初期化します：

<div id="uppy-dashboard"></div>

<script type="module">
import { Uppy } from '@uppy/core';
import { Dashboard } from '@uppy/dashboard';
import { XHRUpload } from '@uppy/xhr-upload';

const uppy = new Uppy()
  .use(Dashboard, {
    target: '#uppy-dashboard',
    inline: true,
    height: 400
  })
  .use(XHRUpload, {
    endpoint: '/uploads/sign',
    method: 'post',
    headers: {
      'X-CSRF-Token': 'request->getAttribute('csrfToken') ?>'
    }
  });
</script>

高度な設定

ファイルタイプとサイズの制限

UppyのRestrictorプラグインを使用して、許可されるファイルタイプとサイズを設定します：

import { Restrictor } from '@uppy/restrictor';

uppy.use(Restrictor, {
  allowedFileTypes: ['image/*', '.pdf'],
  maxFileSize: 5 * 1024 * 1024 // 5MB
});

CakePHPのフォームバリデーションとの統合

CakePHPのコントローラーでファイルのバリデーションを追加します：

// src/Model/Table/UploadsTable.php
public function validationDefault(Validator $validator): Validator {
    $validator
        ->add('file', 'fileSize', [
            'rule' => ['fileSize', '<=', '5MB'],
            'message' => 'ファイルサイズは5MB以内にしてください'
        ])
        ->add('file', 'mimeType', [
            'rule' => ['mimeType', ['image/jpeg', 'image/png', 'application/pdf']],
            'message' => 'JPG、PNG、PDFのみアップロードできます'
        ]);
    return $validator;
}

トラブルシューティング

CORS関連の問題

CORSエラーが発生した場合は、CakePHPのcors.phpを適切に設定します：

// config/cors.php
return [
    'paths' => [
        '/uploads/*' => [
            'origin' => '*',
            'methods' => ['GET', 'POST', 'OPTIONS'],
            'headers' => ['Content-Type', 'Authorization']
        ]
    ]
];

大容量ファイルのアップロード

TUSプラグインを使用して大容量ファイルのアップロードを処理します：

npm install @uppy/tus

import { Tus } from '@uppy/tus';

uppy.use(Tus, {
  endpoint: '/uploads/tus',
  chunkSize: 5 * 1024 * 1024 // 5MB分割
});